Microsoft-expression-web-quick-guide

提供：Dev Guides
移動先:案内、検索

Microsoft Expression Web-概要

Microsoft Expression Webは、Web標準に準拠した機能豊富なWebサイトを設計、開発、および公開するためのフル機能のプロフェッショナルツールです。 Expression Webを使用して、コンピューターとホストアカウント間でファイルを転送できるWebページとWebサイトを作成できます。

Expression Webは、HTML5、CSS 3、ASP.NET、PHP、JavaScript、XML + XSLT、およびXHTMLを使用してWebページを設計および開発できます。

Expression Web 4をインストールして実行するには、.NET Framework 4.0およびSilverlight 4.0が必要です。

Microsoft Expression Web-歴史

Microsoft Expression Web-歴史Microsoftは、2006年5月14日にExpression Webの最初のCommunity Technology Preview（CTP）バージョンをリリースしました。 

*Microsoft Expression Web 4* は2010年6月7日にリリースされました。
  • HTMLアドインのオプションと、Mac OS XやLinuxブラウザーなど、ユーザーのシステムにインストールできないブラウザーでページをテストするためのWebベースの機能へのアクセスを追加しました。
  • また、最高の検索エンジンランキングを取得するためのベストプラクティスに対して、作成済みのWebサイトを分析できるSEOチェッカーも提供します。

Expression Webサービスパック

Expression WebサービスパックExpression Web 4サービスパック1は2011年3月にリリースされ、IntelliSense for HTML5およびCSSのサポートが追加されました。

Expression Web 4 Service Pack 2は2011年7月にリリースされました。 それはいくつかの問題を修正し、次のような新機能を導入しました-

  • jQuery IntelliSenseのサポート
  • スニペットを管理するためのパネル
  • インタラクティブスナップショットパネル
  • コードビューのコメント/コメント解除機能、および *ワークスペースとツールバーのカスタマイズ。

2012年12月、MicrosoftはExpression Studioがスタンドアロン製品ではなくなることを発表しました。* Expression Blend はVisual Studioに統合されていますが、 *Expression Web および Expression Design は無料の製品になります。

システム要求

Microsoft Expression Webを使用してWebサイトを作成するには、コンピューターが次の要件を満たしている必要があります-

  • 少なくともWindows XP Service Pack 3または最新のオペレーティングシステムが必要です。
  • 1 GHz以上のプロセッサを搭載したPCが必要です。
  • PCには1 GB以上のRAMが必要です。
  • PCには、2 GB以上のハードディスク空き容量が必要です。
  • .NET Framework 4.0およびSilverlight 4.0が必要です。
  • お使いのPCはMicrosoftDirectX®9.0グラフィックスをサポートしている必要があります。
  • DVD互換ドライブが必要です。
  • 24ビットカラーの1024×768以上の解像度のモニターが必要です。
  • 一部の製品機能には、Firefox 3.0以降、Internet Explorer 8が必要です。 したがって、同じバージョンが必要です。

実際の要件と製品の機能は、システム構成とオペレーティングシステムによって異なる場合があります。

環境設定

マイクロソフトは、https://www.microsoft.com/en-pk/download/details.aspx？id = 36179 [www.microsoft.com/en-pk/download/からダウンロードできるMicrosoft Expression Webの無料バージョンを提供しています。 details.aspx？id = 36179]

インストール

  • ステップ1 *-Expression Webをインストールする前に、.NET Framework 4.0をインストールする必要があります。
  • ステップ2 *-ダウンロードが完了したら、インストーラーを実行します。 次のダイアログが表示されます。

インストール

  • ステップ3 *-Acceptボタンをクリックします。
  • ステップ4 *-[はい]ラジオボタンを選択し、[次へ]をクリックします。

はいボタン

  • ステップ5 *-インストール用に他の場所も選択できます。 場所を選択し、[インストール]ボタンをクリックします。

場所

インストールプロセスが開始されます。

インストールプロセスの開始

インストールが完了すると、次のダイアログが表示されます。

インストール完了

  • ステップ6 *-[完了]をクリックして続行します。

Microsoft Expression Web-新しいWebサイト

前の章では、Microsoft Expression Webをインストールしました。これで作業を開始する準備ができました。 この章では、新しいWebサイトをゼロから作成する方法を学びます。

ウェブサイトを作成する

新しいWebサイトを作成するには、Microsoft Expression Webを開きます。

Webサイトの作成

次に、以下の手順に従う必要があります。

  • ステップ1 *-*サイト→新規サイト…*メニューオプションを選択します。

新しいサイト

  • ステップ2 *-次のダイアログが開き、さまざまな種類のWebサイトを作成またはインポートできます。

1ページのサイト

  • ステップ3 *-簡単にするために、*一般→1ページのサイト*を選択します。
  • 場所を指定するか、新しいWebサイトを作成する場所を参照できます。
  • 名前フィールドにWebの名前を入力し、[OK]をクリックします。

全般

ステップ4 *- *default という名前の1つのページで新しいWebが作成されます。 ファイルを右クリックして[名前の変更]オプションをクリックし、名前を indexl に変更します。

インデックス

ステップ5 *-Expression Webで使用されるデフォルトの *doctype は- 

<!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">
  • コードビュー*に切り替えるだけで確認できます。

コードビュー

Doctypeは Tools→Page Editor Options→Authoring から変更できます。

ツール

ステップ6 *-では、 *body タグ内に <h1> タグと、次のコードに示すようなテキストを追加しましょう。 

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

   <body>
      <h1>
         This my first Web page
      </h1>
   </body>
</html>
  • ステップ7 *-ブラウザでWebを表示するには、[ファイル]メニューに移動し、[ブラウザでプレビュー]→[任意のブラウザ]を選択します。たとえば、Internet Explorerです。

プレビューブラウザ

Internet ExplorerでWebを開きます。

Webを開く

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-Webページのレイアウト

この章では、Webページの基本的なレイアウトについて説明します。 ウェブページのレイアウトを作成する前に、コンテンツについて考え、ウェブサイトに表示されるコンテンツであるため、そのコンテンツの表示方法を設計する必要があります。

視聴者が私たちのサイトを見つけて、チェックアウトするためにどのようにコンテンツを提示するかは私たち次第です。 レイアウトには、おそらく会社のロゴまたはバナーが上部に含まれ、ナビゲーションメニュー、複数の列を含むコンテンツ領域、およびページの下部にフッターが含まれます。

以前は、開発者はテーブルを使用してこの外観を実現していました。 テーブルは、行と列を作成するために使用されるボックスのグループを作成しました。 現在、Webデザイナーは <div> s を使用してボックスを作成し、CSSを使用してそれらのボックスをページに配置します。

<div>タグ

以下は、<div>タグの機能の一部です。

  • <div>タグは、HTMLドキュメント内の部門またはセクションを定義し、それらの部門またはセクションの管理、スタイル設定、および操作を簡単にします。
  • ブロック要素をグループ化してCSSでフォーマットするために使用されます。
  • ブラウザは通常、div要素の前後に改行を配置します。
  • <div>タグはブロックレベルの要素です。
  • <div>タグには、他のほとんどの要素を含めることができます。
  • <div>タグを<p>タグ内に含めることはできません。

例

<div> </div>タグを使用してさまざまなボックスとスタイルルールを作成する簡単な例を見てみましょう。

ステップ1 *-Expression Webを開いてから、前の章で作成した *indexl ページを開きます。

indexlページ

ステップ2 *-上記のスクリーンショットに見られるように、コードビューはデフォルトで強調表示されています。 *コードビュー*または*デザインビュー*で作業できますが、コードビューとデザインビューの両方を開くスプリットビューも表示できます。 そこで、 *Split View オプションを選択しましょう。

スプリットビュー

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

indexlページ

ステップ4 *-最初のステップは、*セレクタ*ドロップダウンリストから *body を選択し、ドロップダウンリストの[定義]から既存のスタイルシートを選択することです。 URLから、前の章で作成したCSSファイルを選択します。

左側には、フォント、背景などの*カテゴリ*リストがあります。 現在のフォントが強調表示されます。 上記のスクリーンショットに示すように、要件に応じてフォント関連情報を設定します。

カテゴリ

  • ステップ5 *-必要な*背景色*を選択します。 ブラウザのボタンを使用して、背景の画像を選択することもできます。 背景が完成したら、必要に応じて境界線を定義します。

背景色

  • ステップ6 *-境界線の*二重線*オプションを選択し、ドロップダウンリストから幅と色を選択します。 スタイルの設定が完了したら、[OK]をクリックします。

二重線

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

背景色の変更

ステップ8 *- *indexl ページに再度移動し、[ツールボックス]パネルから <div> をドラッグして、開いているページにドロップします。

<div>

ステップ9 *-*コードビュー*の上に、 *<body> および <div> タグが表示されます。 <div> タグをクリックし、[スタイルの適用]パネルで[新しいスタイル]をクリックします。 [新しいスタイル]ダイアログが開きます。

[セレクタ]フィールドに「#container」と入力します。 ハッシュマーク＃はIDセレクターです。 [定義]ドロップダウンリストから、[既存のスタイルシート]を選択し、[ドキュメント選択に新しいスタイルを適用]オプションをオンにします。 背景カテゴリに移動します。

コードビュー

  • ステップ10 *-背景色を選択し、白色を選択してから[ボックス]カテゴリに移動します。

ボックスカテゴリ

ステップ11 *- *padding と margin を定義して、 Position カテゴリに移動します

位置

  • ステップ12 *-幅を90％に設定します。 ただし、ここではコンテンツを入力するときにコンテナを拡張する必要があるため、高さを指定しないでください。 OKボタンをクリックしてください。

コンテナを展開

同様に、ヘッダー、トップナビゲーション、左ナビゲーション、メインコンテンツ、フッターのスタイルを追加しましょう。

sample.css

以下は、上記のすべてのスタイルを追加した後の sample.css スタイルシートのコードです。 

body {
   font-family: Calibri;
   font-size: medium;
   font-weight: normal;
   font-style: normal;
   font-variant: normal;
   text-transform: none;
   color: #0000FF;
   background-color: #CCFFFF;
   background-image: none;
   border: medium double #FF0000;
}

#container {
   background-color: #FFFFFF;
   padding: 8px;
   margin: 8px;
   width: 90%;
}

#header {
   background-color: #54B431;
   background-repeat: no-repeat;
   background-position: right center;
   height: 170px;
}

#top-nav {
   height: 50px;
   border-top: solid medium #006600;
   border-bottom: solid medium #006600;
   background-color: #FFFFFF;
}

#left-nav {
   margin: 20px 0px 10px 0px;
   width: 180px;
   float: left;
   border: thin dashed #006600;
}

#main-content {
   margin: 20px 10px 10px 200px;
   background-color: #CCFFCC;
}

#footer {
   border-top: 2px solid #006600;
   clear: both;
   padding: 10px 0px;
   text-align: center;
}

インデックス

以下は、すべての<div>タグを追加した後のindexlファイルのコードです。 

<!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"/>
      <style type = "text/css"></style>
      <link href = "sample.css" rel = "stylesheet" type = "text/css"/>
   </head>

   <body>
      <div id = "container">
         <div id = "header"></div>
         <div id = "top-nav"></div>
         <div id = "left-nav"></div>
         <div id = "main-content"></div>
         <div id = "footer"></div>
      </div>
   </body>
</html>

出力

デザインビューのページレイアウトは、次のスクリーンショットのようになります。

ページレイアウト

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>

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

水平ナビゲーション

この章では、水平ナビゲーションまたは*メニュー項目*をWebサイトに追加する方法を学習します。

ステップ1 *-メニュー項目または水平ナビゲーションを作成するには、メニュー項目のリストを含むindexlファイルの *<div id =“ top-nav”> に次のコードを追加しましょう。 

<div id = "top-nav">
   <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
   </ul>
</div>
  • ステップ2 *-トップメニュー用のシンプルな箇条書きリストです。 ハイパーリンクを作成するには、*デザインビュー*または*コードビュー*に移動します。

デザインビュー

  • ステップ3 *-ハイパーリンクとして使用するアイテムを選択し、Ctrl + Kを押します。

Hiperlink

  • ステップ4 *-ScreenTip…ボタンをクリックします。

ScreenTip

  • ステップ5 *-画面のヒントとして必要なテキストを入力し、[OK]をクリックします。

ハイパーリンクの挿入

ステップ6 *-*表示するテキスト*フィールドに *Home と入力し、indexlファイルを選択してOKをクリックします。

表示するテキスト

  • ステップ7 *-同様に、次のコードに示すように、他のメニュー項目のハイパーリンクを追加します。
<!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"/>
      <style type = "text/css"></style>
      <link href = "sample.css" rel="stylesheet" type = "text/css"/>
   </head>

   <body>
      <div id = "container">
         <div id = "header"></div>
         <div id = "top-nav">
            <ul>
               <li><a href = "indexl" title = "Site Home Page">Home</a></li>
               <li><a href = "indexl" title = "Menu Item 1.">Menu Item 1</a></li>
               <li><a href = "indexl" title =  "Menu Item 2.">Menu Item 2</a></li>
               <li><a href = "indexl" title = "Menu Item 3.">Menu Item 3</a></li>
            </ul>
         </div>
         <div id = "left-nav"> </div>
         <div id = "main-content"> </div>
         <div id = "footer"> </div>
      </div>
   </body>
</html>
  • ステップ8 *-トップナビゲーションのスタイルを設定するには、[スタイルの管理]パネルに移動します。

スタイルの管理

ステップ9 *-“＃top-nav” *を右クリックして、スタイルの変更を選択します。 「境界線」カテゴリを選択し、幅を細いに変更します。

top-nav

  • ステップ10 *-[ボックス]カテゴリを選択し、[すべてに同じ]の埋め込みをオフにして、上部と下部のフィールドに10を入力します。

ボックス

  • ステップ11 *-*位置*カテゴリに移動します。

位置カテゴリ

  • ステップ12 *-*高さ*フィールドから50を削除し、[OK]をクリックします。 [スタイルの適用]パネルで、[新しいスタイル…]をクリックします

高さフィールド

ステップ13 *-[セレクタ]フィールドに＃top-nav ul *と入力し、[定義]ドロップダウンから既存のスタイルシートを選択します。 [ブロック]カテゴリで、[テスト位置合わせ]フィールドから中央を選択し、[リスト]カテゴリに移動します。

top-nav ul

ステップ14 *- *list-style-type フィールドから none を選択し、OKをクリックします。

list-style-type

ステップ15 *-[スタイルの適用]パネルで、[新しいスタイル]をクリックします。[セレクタ]フィールドに＃top-nav ul li *と入力します。 次に、「定義」ドロップダウンから既存のスタイルシートを選択し、「レイアウト」カテゴリに移動します。

スタイルが適用されます

  • ステップ16 *-*表示*フィールドから*インライン*を選択し、OKをクリックします。

インライン

ステップ17 *-[スタイルの適用]パネルに移動し、[新しいスタイル]をクリックします。セレクタフィールドに＃top-nav ul li a *と入力し、[定義]ドロップダウンから既存のスタイルシートを選択し、フォントの色として白を選択します。

top-nav ul li

  • ステップ18 *-*背景*カテゴリーに移動します。

背景カテゴリ

  • ステップ19 *-背景色として*緑*を選択し、*ボックスカテゴリ*に移動します。

緑を選択

  • ステップ20 *-*パディング値*を設定し、[OK]をクリックします。

ステップ21 *-[スタイルの適用]パネルに戻り、[新しいスタイル]をクリックします。 [セレクタ]フィールドに＃topnav ul li a：hover *と入力し、[定義先]ドロップダウンから既存のスタイルシートを選択し、*フォントの色*として*黒*を選択します。

パディング値

  • ステップ22 *-*背景カテゴリ*に移動します。

フォントの色

  • ステップ23 *-マウスがメニュー項目の上にあるときにメニューオプションの背景色を選択し、[境界線]カテゴリに移動します。

境界線カテゴリ

  • ステップ24 *-境界線のスタイル、幅、色を選択し、[OK]をクリックします。 外観を確認するには、[ファイル]メニューに移動し、[ブラウザーでプレビュー]を選択します。

境界線スタイル

メニュー項目の上にマウスを置くと、背景とフォントの色が変わります。

垂直ナビゲーション

この章では、Webサイトに垂直ナビゲーションまたはメニュー項目を追加する方法を学習します。 ステップバイステップで行きましょう。

ステップ1 *-メニュー項目または垂直ナビゲーションを作成するには、メニュー項目のリストを含むindexlファイルの *<div id =“ left-nav”> に次のコードを追加しましょう。 

<div id = "left-nav">
   <p>Site Navigation</p>
   <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
   </ul>
</div>
  • ステップ2 *-トップメニューの簡単な箇条書きリストです。 ハイパーリンクを作成するには、*デザインビュー*または*コードビュー*に移動します。

ブレットリスト

  • ステップ3 *-ハイパーリンクとして使用するアイテムを選択し、Ctrl + Kを押します。

Hiperlink

ステップ4 *-ScreenTip…ボタンをクリックします。 必要なテキストを *screentip として入力し、[OK]をクリックします。

ScreenTip

ステップ5 *-*表示するテキスト*フィールドに *Home と入力し、indexlファイルを選択してOKをクリックします。

ハイパーリンクの挿入

この段階で、私たちのindexlページは次のようになります-

Htmlページの外観

  • ステップ6 *-次のコードに示すように、他のメニュー項目のハイパーリンクを追加します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!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"/>
      <style type = "text/css"></style>
      <link href = "sample.css" rel = "stylesheet" type = "text/css"/>
   </head>

   <body>
      <div id = "container">
         <div id = "header"></div>
         <div id = "top-nav">
            <ul>
               <li><a href = "indexl" title = "Site Home Page">Home</a></li>
               <li><a href = "indexl" title = "Menu Item 1.">Menu Item 1</a></li>
               <li><a href = "indexl" title = "Menu Item 2.">Menu Item 2</a></li>
               <li><a href = "indexl" title = "Menu Item 3.">Menu Item 3</a></li>
            </ul>
         </div>

         <div id = "left-nav">
            <p>Site Navigation</p>
            <ul>
               <li><a href = "indexl" title = "Site Home Page">Home</a></li>
               <li><a href = "indexl" title = "Navigation Item 1.">Navigation Item 1</a></li>
               <li><a href = "indexl" title = "Navigation Item 2.">Navigation Item 2</a></li>
               <li><a href = "indexl" title = "Navigation Item 3.">Navigation Item 3</a></li>
            </ul>
         </div>
         <div id = "main-content"></div>
         <div id = "footer"></div>
      </div>
   </body>
</html>
  • ステップ7 *-トップナビゲーションのスタイルを設定するには、[スタイルの管理]パネルに移動します。 *＃left-nav *を右クリックして、[スタイルの変更…]を選択します

スタイルの変更

ステップ8 *-font-sizeフィールドに値0.9を入力し、font-sizeの横にあるドロップダウンリストから *em を選択し、Boxカテゴリに移動します。

Select em

  • ステップ9 *-「すべてに同じ」パディングを確認し、上部のフィールドに5を入力して[OK]をクリックします。 [スタイルの適用]パネルで、[新しいスタイル…]をクリックします

スタイルパネルの適用

ステップ10 *-[セレクタ]フィールドに＃left-nav ul *と入力します。 [定義]ドロップダウンから[既存のスタイルシート]を選択し、[リスト]カテゴリで、リストスタイルタイプフィールドから[なし]を選択して[OK]をクリックします。

left-nav ul

  • ステップ11 *-再度、*スタイルの適用*パネルから、*新しいスタイル*をクリックします。 「すべてに同じ」パディングをオフにします。 下部のフィールドに0.2を入力し、[OK]をクリックします。

新しいスタイル

ステップ12 *-[セレクタ]フィールドに＃left-nav ul li *と入力し、[定義]ドロップダウンから既存のスタイルシートを選択して、[ボックス]カテゴリに移動します。

left-nav ul li

  • ステップ13 *-[スタイルの適用]パネルに移動し、[新しいスタイル]をクリックします。

スタイルの適用に移動

ステップ14 *-[セレクタ]フィールドに＃left-nav ul li a *と入力し、[定義]ドロップダウンから既存のスタイルシートを選択し、フォントの色として白を選択します。

left-nav ul li a

  • ステップ15 *-背景カテゴリに移動します。 背景色として色を選択します

背景

  • ステップ16 *-*ボックス*カテゴリに移動し、パディング値を設定します。

ボックス値

ステップ17 *-*レイアウト*カテゴリに移動します。 [*表示]ドロップダウンから[ブロック]を選択し、[OK]をクリックします。

ブロックの選択

ステップ18 *-次に、[スタイルの適用]パネルに戻り、[新しいスタイル]をクリックします。 [セレクタ]フィールドに＃left-nav ul li a：hover *と入力し、[定義先]ドロップダウンから既存のスタイルシートを選択します。 フォントの色として黒を選択します。

パディング値

  • ステップ19 *-次に、[背景]カテゴリに移動します。 マウスがメニュー項目の上にあるときにメニューオプションの背景色を選択し、[OK]をクリックします。

メニュー項目

  • ステップ20 *-外観を確認するには、[ファイル]メニューに移動し、ブラウザで[プレビュー]を選択します。

ファイルメニュー

メニュー項目の上にマウスを置くと、背景とフォントの色が変わります。

Microsoft Expression Web-ページの検証

この章では、HTMLコードとCSSコードの両方を検証する方法を学習します。 Microsoft Expression Webには、コードエラーや特定のHTMLおよびCSSスキーマと互換性のないコードについてWebページをチェックする方法がいくつかあります。

  • ステータスバーとコードビューは、1つのページでコードエラーと非互換性を警告します。一方、互換性作業ウィンドウには、1つ以上のページまたはWebサイト全体のすべてのコードエラーと非互換性がリストされます。
  • Expression Webは、ページ内のDocType宣言に基づくドキュメントスキーマを使用して、互換性のないコードを識別します。
  • ページにDocType宣言が含まれていない場合、またはDocTypeが認識されない場合、Expression Webは*セカンダリスキーマ*を使用します。

サイトを作成してそのページで作業するときは、ページを検証する習慣を身に付ける必要があります。 Microsoft Expression Webには、Webページの検証中に非常に役立つさまざまなツールがあります。 Expression Webには非常に便利なオプションが2つあるので、[ツール]メニューに移動して[ページエディター]オプションを選択します。

セカンダリスキーマ

[全般]タブには2つのオプションがあります-

  • 無効なHTMLを強調表示-このオプションをチェックすると、特定の配色で無効なHTMLが表示され、黄色の背景にデフォルトで赤いテキストが表示されます。
  • Highlight Incompatible HTML -このオプションをオンにすると、HTML標準と互換性のないコードの下に波線が表示されます。

ステータスバー

現在開いているWebページにコードエラーが含まれている場合、 Code Error Detected アイコン（次のスクリーンショットで強調表示）が表示されます。

</div>タグで記号「>」を忘れたと仮定します- 

<div id = "footer"></div>

この場合、プログラムウィンドウの下部にあるステータスバーに[コードエラーが検出されました]アイコンが表示されます。

ステータスバー

ドロップダウンメニューから[Go To Error]を選択すると、エラーが存在する行に移動し、構文を簡単に修正できます。

指定したDocTypeと互換性のないコードがページに含まれている場合、ステータスバーに HTML Incompatibility Detected アイコンが表示されます。

エラーである「href」の代わりに「hre」をハイパーリンクに使用したと仮定します。 

<li><a href = "indexl" title = "Site Home Page">Home</a></li>

ステータスバーには、次のスクリーンショットに示すように、HTML Incompatibility Detectedアイコンが表示されます。

検出されたアイコン

ドロップダウンメニューから[Go To Error]を選択すると、エラーが存在する行に移動し、構文を簡単に修正できます。

Go To Error

互換性レポート

互換性レポートは、ページとCSSファイルでコードエラーと、指定したDocTypeおよびCSSスキーマと互換性のないコードをチェックします。 特定のファイルのみまたはWebサイト全体をチェックするレポートを生成できます。

  • ステップ1 *-互換性レポートを生成するには、ツールメニューに移動し、[互換性レポート…​]オプションをクリックします。

互換性レポート

  • ステップ2 *-互換性チェッカーダイアログには、サイト内の特定のファイルのみをチェックするさまざまなオプションがあり、それらのファイルを開くか、[フォルダーリスト]作業ウィンドウまたはWebサイトビューで選択します。 要件に従ってオプションを選択し、[チェック]ボタンをクリックします。

互換性チェッカー

  • ステップ3 *-互換性タスクペインが開き、レポートの生成のステータスがタスクペインの下部に表示されます。 任意の行をダブルクリックすると、エラーが存在する場所に移動します。

互換性タスクペイン

動的Webテンプレート

動的Webテンプレートは、WebページのHTMLベースのマスターコピーであり、作成可能なWebページの設定、書式設定、およびページ要素（テキスト、グラフィックス、ページレイアウト、スタイル、変更可能な領域など）を含めることができます。

Webサイトのページに動的Webテンプレートを添付すると、そのテンプレートはそれらのページのレイアウトを定義します。 Webサイトでは任意の数の動的Webテンプレートを使用でき、必要な数のページに動的Webテンプレートを添付できます。

ダイナミックWebテンプレートを使用すると、同じレイアウトを共有するHTMLページを作成できます。 共有レイアウトを提供することに加えて、テンプレートの他の領域への変更を防止しながら、テンプレート内の一部の領域を編集可能にすることができます。

つまり、他のユーザーにコンテンツの追加と編集を許可しながら、ページのレイアウトとテンプレート自体を保持することができます。

動的Webテンプレートの必要性

Webサイト設計の最も重要な概念は、サイトの一貫したルックアンドフィールを維持し、ダイナミックWebテンプレートを使用してそれを実現することです。 動的Webテンプレートは以下を提供します-

  • サイトマップ、連絡先、概要、検索ページなどの基本的なページ。 訪問者は、サイト上の任意のページからホームページにアクセスできる必要があります。
  • サイト全体で一貫したナビゲーション。
  • サイト全体で一貫した外観。

動的Webテンプレートを作成する

ダイナミックWebテンプレート（DWT）を作成するには、空のHTMLページから始めて、**。dwtファイル*として保存します。 手順を追って説明していきましょう。

  • ステップ1 *-indexlファイルを開き、[ファイル]→[名前を付けて保存…​]メニューオプションを選択して、[名前を付けて保存]ダイアログを開きます。

メニューオプション

[ファイルの種類]ドロップダウンから動的Webテンプレート（* .dwt）を選択し、ファイル名をインデックスから master.dwt に変更して、[保存]ボタンをクリックします。

  • ステップ2 *-これで、フォルダリストに新しいファイルmaster.dwtが作成されます。 新しいHTMLファイルを作成して、index_2lと名付けましょう。 master.dwtファイルを開き、デザインビューまたはコードビューで、メインコンテンツの<div>タグ内を右クリックします。

HTMLファイル

  • ステップ3 *-メニューから、[編集可能な領域の管理]を選択します。[編集可能な領域]ダイアログが開きます。

編集可能な領域

  • ステップ4 *-リージョン名に、編集可能なリージョンの名前を入力し、[追加]をクリックします。 必要に応じて、編集可能な領域を追加して繰り返します。

地域名

  • ステップ5 *-すべての編集可能な領域を追加したら、[閉じる]をクリックします。 次に、index_2lファイルに移動し、フォルダリストでも選択します。

すべての編集可能な領域

  • ステップ6 *-[書式]メニューに移動し、[動的Webテンプレート]→[動的Webテンプレートの添付…​]を選択します。[動的Webテンプレートの添付]ダイアログが開きます。

動的Webテンプレート

ステップ7 *-ここではmaster.dwtファイルである *Dynamic Web Template を選択し、[開く]ボタンをクリックします。 警告メッセージが表示されます。 はいをクリックします。

警告メッセージ

  • ステップ8 *-同じテンプレートがindex_2lファイルに適用されていることがわかります。 同様に、同じテンプレートをWebサイトに必要な数のHTMLページに追加できます。

同じテンプレート

  • ステップ9 *-このページでは、メインコンテンツセクションのみを編集できます。 マウスを他のセクションに移動すると、編集できないことがわかり、マウスカーソルも赤い十字の円に変わります。

メインコンテンツセクション

  • ステップ10 *-外観を確認するには、[ファイル]メニューに移動し、ブラウザで[プレビュー]を選択します。

プレビューを選択

Microsoft Expression Web-検索ページ

この章では、ウェブサイトに検索オプションまたは検索ボックスを追加する方法を学びます。 大規模なサイトの場合、ユーザーがデータを簡単に見つけられるように、サイトに検索ボックスを用意する必要があります。 Windows Live、Googleなど、無料のものが多数あります。

Windows Liveサーチ

次の手順は、Windows Live SearchボックスをWebページに追加し、検索フォームを設定してWeb全体またはWebサイトのみを検索する方法を示しています。

ステップ1 *-新しいHTMLページを作成し、 *SearchPage と呼びます。

SearchPage

  • ステップ2 *-[書式]メニューに移動し、[ダイナミックWebテンプレート→ダイナミックWebテンプレートの添付…]オプションを選択します。 master.dwtファイルを選択し、「開く」ボタンをクリックします。

動的テンプレート

  • ステップ3 *-編集可能な領域内に次のコードを追加しましょう。
<form method = "get" action = "http://search.live.com/results.aspx">
   <input type = "hidden" name = "cp" value = "1252"/>
   <input type = "hidden" name = "FORM" value = "FREESS"/>
   <table style = "background-color: #ffffff;">
      <tr>
         <td>
            <a href = "http://search.live.com/">
               <img src = "http://search.live.com/s/affillogoLive.gif"
                  style = "border:0px;" alt = "Live Search"/>
            </a>
         </td>
         <td>
            <input type = "text" name = "q" size = "30"/>
            <input type = "submit" value = "Search Site"/>
            <input type = "hidden" name = "q1"
               value = "site:http://www.microsoft.com/expression"/>
         </td>
      </tr>
   </table>
</form>

地域

  • ステップ4 *-ページを保存します。 [ファイル]メニューに移動し、[ブラウザでプレビュー]を選択します。

ページを保存

  • ステップ5 *-WebページにWindows Live Searchが表示されます。 検索に何か入力して、[サイトの検索]ボタンをクリックします。

サイト検索ボタン

  • ステップ6 *-ご覧のとおり、Webで検索されます。 検索をWebサイトのみに制限する場合は、https://www.microsoft.com/expression [www.microsoft.com/expression]ではなく、次の名前でサイトドメインを指定する必要があります。
<input type = "hidden" name = "q1" value = "site:http://www.microsoft.com/expression"/>
  • ステップ7 *-同様に、次のコードを編集可能な領域に追加することにより、Google検索オプションを追加できます。
<form method = "get" action = "http://www.google.com/search">
   <div style = "border: 1px solid black; padding: 4px; width: 20em; margin: 0px auto 0px auto">
      <table border = "0" cellpadding = "0">
         <tr>
            <td class = "center">
               <input type = "text" name = "q" size = "25" maxlength = "255" value = ""/>
               <input type = "submit" value = "Google Search"/>
            </td>
         </tr>
         <tr>
            <td align = "center" style = "font-size: 75%">
               <input type = "checkbox" name = "sitesearch"
                  value = " http://www.microsoft.com/expression" checked = "checked"/>
               Only search this website<br/>
            </td>
         </tr>
      </table>
   </div>
</form>
  • ステップ8 *-HTMLページを保存すると、検索ボックス、検索ボタン、チェックボックス、チェックボックスラベルが表示されます。

検索ボックス

  • ステップ9 *-ユーザーがWebサイトのみを検索するように制限するには、チェックボックスを選択して[タグのプロパティ]パネルに移動し、Valueプロパティをhttps://www.microsoft.com/expression [などのWebサイトのURLに設定しますwww.microsoft.com/expression]。

チェックボックス

  • ステップ10 *-ページを保存し、ブラウザでプレビューします。 これで、ウェブページにGoogle検索オプションが表示されます。

Google検索オプション

Microsoft Expression Web-画像

画像は、ウェブページで頻繁に使用され、見た目を美しくし、ユーザーエクスペリエンスを向上させます。 この章では、ウェブサイトに画像を追加する方法を学びます。 いつものように、ステップごとに進み、プロセスを詳細に学びましょう。

  • ステップ1 *-画像の追加を開始するには、新しい1ページのサイトを作成して、defaultlファイルの名前をindexlに変更します。

デフォルトのHTML

  • ステップ2 *-次に、Webページに画像を含める必要があります。そのため、Webページでそれらの画像を使用できます。 新しいフォルダーを作成しましょう。 フォルダーリストで、Webサイト名を右クリックします。

ウェブサイト名

  • ステップ3 *-現在、このフォルダには画像がありません。 このフォルダに画像を追加するには、ハードドライブから画像を選択してドラッグし、画像フォルダにドロップします。

画像の追加

次のスクリーンショットに示すように、画像がWebサイトの images フォルダーに追加されていることがわかります。

画像フォルダ

  • ステップ4 *-これらの画像はウェブサイトに含まれていますが、ウェブページでは使用されていません。 Webページに画像を追加する簡単な方法は、画像フォルダから画像をドラッグし、Webページで画像を追加するコードビューにドロップすることです。

見出しの下に画像を追加するとします。 画像をドロップしてマウスボタンを離すと、次のダイアログボックスが表示されます。

アクセシビリティプロパティ

ここで、代替テキストと長い説明を指定できます。 次に、[OK]をクリックしてWebページを保存します。 これで、 <img> タグが画像の代替名とソースとともに追加されていることがわかります。

Imgタグ

  • ステップ5 *-同じプロセスに従い、2番目の画像とその代替名とソースを追加します。
*indexl* ファイルは次のようになります-
<!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"/>
   </head>

   <body>
      <h1> Working with images </h1>
      <img alt = "Beautiful Birds" src = "images/birds.jpg"/>
      <img alt = "Other Birds" src = "images/birds2.jpg"/>
   </body>
</html>
  • ステップ6 *-*画像のプロパティ*ダイアログボックスでは、最も一般的に使用される画像属性にアクセスできます。 画像をダブルクリックすると、[画像のプロパティ]ボックスが表示されます。

ピクチャプロパティ

Expression Webの[画像のプロパティ]ダイアログには、[一般]と[外観]の2つのタブがあります。

[一般]タブで利用できるオプションは次のとおりです。

  • 画像-グラフィック画像のフォルダ/ファイル名が含まれています。
  • 代替テキスト-グラフィックがダウンロードされているとき、グラフィックが見つからないとき、またはサイト訪問者がポインタをその上に移動したときに、写真に表示するテキストを入力します。 視聴者が使用している場合、このテキストはスクリーンリーダーでも使用されます。
  • 長い説明-いくつかの単語では画像を説明できない場合があります。 チャートとグラフは例です。 [参照]をクリックして、画像の長い説明を含むファイルを選択します。
  • 場所-画像をWebページまたはより大きな画像にリンクする場合は、ここにハイパーリンクを挿入します。
  • ターゲットフレーム-現在のページがフレームページの場合、このオプションはリンクを表示するフレームを示します。または、新しいウィンドウで画像またはページを開くことを選択できます。

[外観]タブでは、次のオプションを使用できます*。

外観タブ

  • Wrapping Style -None、Left、Rightなど、ページ内での画像のフロート方法を指定します。
  • レイアウト-このセクションでは、配置、境界線の太さ、水平および垂直マージンを設定できます。
  • サイズ-Expression Webは、画像の実際の寸法に基づいて、画像の幅と高さのプロパティを自動的に設定します。 これらの寸法を変更して画像のサイズを変更するのではなく、グラフィックエディタを使用して画像のサイズを変更します。
  • ステップ7 *-次に、ブラウザでWebページをプレビューします。次の出力が表示されます。

ウェブページ

Microsoft Expression Web-ハイパーリンク

この章では、Webサイトでハイパーリンクを使用する方法を学習します。 Webを非常に拡張できるものの1つは、Webページが他のWebページにリンクする機能です。 *ハイパーリンク*またはリンクは、ほぼすべてのWebページ内にあります。

ハイパーリンクを使用すると、ユーザーはクリックして別のページ、ページ内の場所、画像、またはインターネット上の別の場所に完全に移動できます。 以下は、ハイパーリンクの重要な機能の一部です-

  • Expression Webのハイパーリンクツールとオプションを使用すると、ハイパーリンクを簡単に操作できます。
  • Expression Webのハイパーリンクビューとレポートにより、壊れたリンクや誤ったリンクを簡単に見つけて修正することができます。
  • ハイパーリンクは、クリックすると新しいドキュメントまたは現在のドキュメント内の場所に移動する単語、単語のグループ、または画像です。

アンカータグ

HTMLでは、アンカータグと呼ばれる <a> タグを使用して、別のドキュメントへのリンクを作成します。 アンカーは、他のhtmlページ、画像、テキストドキュメント、またはpdfファイルを指すことができます。 アンカー <a> タグの基本的なコードは次のとおりです。 

<a href = "url">Text to be displayed as link<a>
  • <a> タグでは、「href」属性を使用してドキュメントへのリンクを指定し、アンカータグの開始と終了の間の単語をハイパーリンクとして表示します。
  • Webページのリンク上にカーソルを移動すると、矢印が小さな手に変わります。
  • URLは、プロトコル、Webサーバー、およびファイルパスを指定するアドレスです。
  • URLには、 absolute と relative の2つのタイプがあります。 *絶対URL *には完全なアドレスが含まれていますが、*相対URL *にはアドレスの1つ以上の部分がありません。 ただし、Webブラウザーは、URLを含むページから欠落している情報を取得します。

例

  • 絶対*と*相対URL *の両方を使用する簡単な例を見てみましょう。

ステップ1 *-最初に *indexl ページを開き、 main content セクションに次の行を追加します。 

<div id = "main-content">
   <p> Absolute URL Example: </p>
   <p>  Google </p>
   <p>  Youtube </p>
   <p> Relative URL Example: </p>
   <p>  Home Page 2 </p>
</div>

以下は indexl ページの完全な実装です。 

<!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"/>
      <style type = "text/css">
         #left-nav ul li a:hover {
            color: #000000; background-color: #116611;
         }

         #left-nav ul li a:hover {
            color: #000000; background-color: #66FF99;
         }
      </style>
      <link href = "sample.css" rel = "stylesheet" type = "text/css"/>
   </head>
   <body>
      <div id = "container">
         <div id = "header"> </div>
         <div id = "top-nav">
            <ul>
               <li><a href = "indexl" title = "Site Home Page">Home</a></li>
               <li><a href = "indexl" title = "Menu Item 1.">Menu Item 1</a></li>
               <li><a href = "indexl" title = "Menu Item 2.">Menu Item 2</a></li>
               <li><a href = "indexl" title = "Menu Item 3.">Menu Item 3</a></li>
            </ul>
         </div>

         <div id = "left-nav">
            <p>Site Navigation</p>
            <ul>
               <li><a href = "indexl" title = "Site Home Page">Home</a></li>
               <li><a href = "indexl" title = "Navigation Item 1.">Navigation Item 1</a></li>
               <li><a href = "indexl" title = "Navigation Item 2.">Navigation Item 2</a></li>
               <li><a href = "indexl" title = "Navigation Item 3.">Navigation Item 3</a></li>
            </ul>
         </div>

         <div id = "main-content">
            <p> Absolute URL Example: </p>
            <p>  Google </p>
            <p>  Youtube </p>
            <p> Relative URL Example: </p>
            <p>  Home Page 2 </p>
         </div>
         <div id = "footer"> </div>
      </div>
   </body>
</html>
  • ステップ2 *-Webページを保存すると、メインコンテンツセクションにテキストが表示されます。

Webページを保存

  • ステップ3 *-デザインビューでGoogleを右クリックし、メニューから[ハイパーリンク]を選択します。[ハイパーリンクの挿入]ダイアログが開きます。

Google

  • ステップ4 *-[アドレス]フィールドで、GoogleホームページのURLを指定し、[OK]をクリックします。 同様に、デザインビューでYouTubeを右クリックし、ハイパーリンクを選択します…

アドレスフィールド

  • ステップ5 *-[アドレス]フィールドで、YouTubeホームページのURLを指定し、[OK]をクリックします。 ここで、「Home Page 2」を相対的に右クリックして、メニューから「ハイパーリンク…​」を選択すると、「ハイパーリンクの挿入」ダイアログが開きます。

ホームページ2

  • 手順6 *-相対パスの場合は、アドレスフィールドでindex_2lを選択します。これらのファイルは両方とも同じディレクトリにあるため、Expression Webはindexlファイルから残りのパスを取得します。 OKをクリックしてください。

ご覧のとおり、これらの単語には現在下線が引かれており、ハイパーリンクが作成されています。

作成されたハイパーリンク

ステップ7 *-デフォルトのフォントの色は青で、ハイパーリンクのデフォルトのフォントの色も青です。 ハイパーリンクのデフォルトの色を変更するには、ハイパーリンクのいずれかを選択し、 *Format メニューに移動して、* Background…*メニューオプションを選択します。

フォーマットメニュー

次のダイアログが表示されます。

ダイアログ

  • ステップ8 *-ハイパーリンクの色を緑に変更しましょう。

ハイパーリンクの色

次のスクリーンショットでは、ハイパーリンクの色が緑に変わっていることがわかります。

ハイパーリンクの変更

  • ステップ9 *-ブラウザでこのWebページをプレビューします。

プレビューWebページ

Googleリンクをクリックすると、Googleホームページに移動します。

Googleリンク

  • ステップ10 *-同様に、ホームページに戻ってYouTubeリンクをクリックすると、YouTubeホームページに移動します。 ホームページに戻りましょう。

Youtubeリンク 

*Home Page 2* リンクをクリックすると、* index_2.hmtlファイル*が開くことがわかります。

Hompage

Microsoft Expression Web-ビデオ

この章では、ビデオをWebサイトに追加する方法と、Expression Webでサポートされている形式を学習します。 ビデオの助けを借りて、潜在的な顧客の注意を会社の製品やサービスに簡単に引き付けることができます。

Microsoft Expression Webは、プロモーション、マーケティング、またはトレーニングビデオをWebページに追加するプロセスを簡素化するWebデザインツールです。 Microsoft Expressionのデザインビューにビデオを簡単に挿入できます。

デフォルトで、Expression Webは、Silverlight、Adobe Flash、WMV、ASF、MWA、AVI、WVX、MPEGなどのビデオエンコーディング形式をサポートしています。

例

次に、ビデオを段階的に追加するプロセスを理解するための例を取り上げます。

ステップ1 *-新しいHTMLファイルを追加して、 *videodemol と呼びます。

ビデオデモ

  • ステップ2 *-ビデオを挿入するWebページ内の場所でマウスをクリックします。 見出しの下にビデオを追加するとします。

挿入されたビデオ

ステップ3 *-[挿入]メニュー→[メディア]に移動し、Expressionsがデフォルトでサポートするビデオプレーヤー形式のリストを含むサブメニューを開きます。 *Windows Media Player を選択しましょう。

Windows Media Player

  • ステップ4 *-使用するビデオを見つけます。 ビデオファイルの名前を選択し、[挿入]ボタンをクリックしてWebページに挿入します。 Ctrl + Sを押してファイルを保存すると、[埋め込みファイルの保存]ダイアログボックスが表示されます。

埋め込みファイルを保存

  • ステップ5 *-[OK]をクリックすると、メディアファイルがWebサイトフォルダーに追加されていることがわかります。

メディアファイル

以下は* videodemolページ*のコードです。 

<!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> Video Demo</h1>
      <p>
         <object id = "media1" height = "200" type = "video/x-ms-wmv" width = "200">
            <param name = "filename" value = "logo.wmv"/>
         </object>
      </p>
   </body>
</html>
  • ステップ6 *-ブラウザでWebページをプレビューします。 ビデオが再生されていることがわかります。

ブラウザのWebページ

Microsoft Expression Web-SQLデータソース

Expression Webには、静的なHTMLページを操作するための多くのツールがありますが、より動的なページを作成するためのツールもあります。 動的ページは、多くの場合、データのソースからデータまたはコンテンツを取得します。 この章では、動的ページで使用されるSQL DataSourceを作成する方法を学びます。

例

ドロップダウンリストを作成し、SQL DataSourceを使用してデータベースからデータを取得してリストを埋める簡単な例を見てみましょう。

  • ステップ1 *-新しい空のWebサイトを作成することから始めます。

空のウェブサイト 

*SQLDataSource* と呼びましょう。 OKをクリックしてください。
  • ステップ2 *-式webがフォルダーを作成したことがわかります。 ただし、空のプロジェクトを作成することを選択したため、まだファイルはありません。

空のプロジェクト

Expression Webは、静的なHTMLサイトを作成するためだけに使用する必要はありません。ページとコントロールを使用して動的なサイトを簡単に作成できます。

  • ステップ3 *-Expression webでは、開発者である必要はなくても、多くの動的コンテンツを作成できます。 [ファイル]→[新しいページ]メニューオプションからASPXファイルを追加しましょう。 中央のモデルでASPXを選択し、[OK]をクリックします。

新しいページ

  • ステップ4 *-ここでは、動的なWebサイトを作成するためにデータベースのデータにアクセスする必要があるコントロールをフォームに作成します。

この特定のケースでは、データベースからデータを取得するSQL DataSourceを作成します。

SQL DataSource

ステップ5 *-ツールボックスに移動して *DropDownList をドラッグし、コードビューの <form> タグ内にドロップするか、デザインビューのフォームセクションにドロップすることもできます。 Expression Webによってコードが追加されていることがわかります。

ここでは、データベースのデータを接続し、ドロップダウンリストに保存します。 したがって、最初に必要なのはデータベースです。

DropDownList

  • ステップ6 *-[新規]→[フォルダー]メニューオプションに移動して、プロジェクトフォルダーに新しいフォルダーを作成します。

新しいフォルダー

ステップ7 *-このフォルダーを *App_Data と呼びます。

App_Data

ステップ8 *- File→Import→File…*メニューオプションを使用して、プロジェクトにデータベースをインポートする必要があります。

ファイルのインポート

  • ステップ9 *-以下に示すように、*インポート*ダイアログを開きます。 [ファイルを追加…​]ボタンをクリックして、ファイルを開くダイアログボックスを開きます。

インポートダイアログ

ステップ10 *-Webサイトに含めるデータベース（*。mdfファイル）*を参照し、[開く]をクリックします。

データベース

  • ステップ11 *-MyTestDatabase.mdfを開きます。 次のダイアログが表示されます。 OKをクリックしてください。

MyTestDatabase

  • ステップ12 *-これで、データベースファイルがApp_Dataフォルダーに追加されていることがわかります。 ドロップダウンリストのようなコントロールがあり、Expression Webでデータをバインドできる場合、デザインビューの右上隅に小さな矢印が表示されます。

App_Dataフォルダー

  • ステップ13 *-これは、特定のコントロールに対して非常に具体的なタスクを実行できる現在のコンテキストメニューであり、その1つはデータソースの選択です。 [*データソースの選択…​ *]をクリックすると、データソース構成ウィザードが開きます。

データソースの選択

  • ステップ14 *-現在、データソースはありません。 メニューから[新しいデータソース]オプションを選択しましょう。

新しいデータソース

ここでは、SQLデータベースをインポートします。 データベースを選択して、[OK]をクリックします。

  • ステップ15 *-次に、接続文字列を指定する必要があります。 [新しい接続]ボタンをクリックします。

新しい接続

  • ステップ16 *-Microsoft SQL Serverデータベースファイルを選択し、[OK]をクリックします。

Microsoft SQL Server

  • ステップ17 *-[参照]ボタンをクリックして、データベースファイルを見つけます。

データベースの検索

  • ステップ18 *-データベースファイルを選択し、[開く]ボタンをクリックするか、データベースファイルをダブルクリックします。

データベースファイル

  • ステップ19 *-接続をテストするには、[接続のテスト]ボタンをクリックします。

テスト接続

次の画面が表示されます。 OKボタンをクリックしてください。

画面の表示

  • ステップ20 *-次に、データソースを構成します。 次の画面で「次へ」をクリックします。

データソースの構成

チェックボックスをオンにして、もう一度[次へ]をクリックします。

チェックボックス

ステップ21 *-ここには、データベースのすべてのテーブルが表示されます。 *Student テーブルを選択しましょう。

学生テーブル

ステップ22 *-リストボックスにすべての列が表示されます。 *ID および LastName を選択します。 下部では、実際にクエリを作成していることがわかります。 Where または* ORDER BY句*を使用することもできます。 クエリが完了したら、[次へ]をクリックします。

句による順序

  • ステップ23 *-*クエリのテスト*ボタンをクリックします。 以下に示すように、*クエリ結果*が表示されます。

クエリ結果

  • ステップ24 *-次のダイアログボックスでは、デフォルトでデータソースが選択されています。 「DropDownListに表示するデータフィールドを選択」は、実際に表示されるフィールドです。 LastNameを選択し、「DropDownListの値のデータフィールドを選択」からIDを選択して、[OK]をクリックします。

データソース構成ウィザード

次のスクリーンショットでわかるように、デザインビューにDataSourceが追加されています。

追加されたデータソース

以下は、Expression Webによって作成されたASPXファイルの完全なコードです。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Page Language = "C#" %>
<html dir = "ltr" xmlns = "http://www.w3.org/1999/xhtml">
   <head runat = "server">
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type"/>
      <title>Untitled 1</title>
   </head>

   <body>
      <form id = "form1" runat = "server">
         <asp:DropDownList id = "listID" runat = "server" DataSourceID = "SqlDataSource1"
            DataTextField = "LastName" DataValueField = "ID">
         </asp:DropDownList>

         <asp:SqlDataSource ID = "SqlDataSource1" runat = "server"
            ConnectionString = "<%$ ConnectionStrings:MyTestDatabaseConnectionString %>"
               SelectCommand = "SELECT [ID], [LastName] FROM [Student]">
         </asp:SqlDataSource>
      </form>
   </body>
</html>
  • ステップ25 *-Ctrl + Sを押してWebページを保存しましょう。

Webページを保存

このページ SQLDatasource.aspx を呼び出して、[保存]をクリックします。

ステップ26 *-このページをブラウザでプレビューしましょう。 *Student テーブルの生徒の姓を含むドロップダウンリストが表示されます。

学生名

Microsoft Expression Web-ワード

この章では、Expression Webを使用してMicrosoft Word文書からWebページを作成する方法を学習します。 最初からページを作成する代わりに、WebコンテンツにMicrosoft Wordを使用して、そのコンテンツをHTMLページに取り込むこともできます。

Microsoft Wordのコンテンツを使用しながら最適な結果を得る方法を見てみましょう。

新しいHTMLページを作成し、 worddemol と名付けます。 このHTMLページに動的Webテンプレート（* .dwt）を適用します。

WordDemo

これは、いくつかのスタイルが適用された Word 文書のサンプルと表です。 まず、このドキュメント全体をクリップボードにコピーしてから、Expression Webに切り替えます。 ドキュメントをWebページのメインコンテンツセクションに貼り付けます。

Word

コンテンツがExpression Webに貼り付けられると、アイコンが表示されます。 これは、*貼り付けオプションボタン*と呼ばれます。 クリックすると、コンテンツをExpression Webに貼り付けるさまざまな方法を選択できます。

貼り付けオプション

デフォルト設定 Match Destination Formatting は、Expression Webが現在のWebページに既に適用されているフォーマットを使用することを意味します。

たとえば、このドキュメントのドキュメントヘッダーは、Microsoft WordのH1スタイルを使用してスタイル設定されています。 ページに貼り付けると、Expression WebはExpression Webの見出し1スタイルに書式設定を適用します。

[ソースの書式設定を保持する]オプションを選択した場合、Expression WebはテキストにH1スタイルを適用します。 ただし、この場合、スタイル1という新しいCSSクラスを作成し、Wordの場合と同じようにテキストを再フォーマットします。

ソースのフォーマットを維持

[書式の削除]を選択すると、ページは以前と同じように見えますが、表の書式を見ると、通常のテキストであることがわかります。

フォーマットの削除

Expression Webで提供されるスタイルは引き続き有効ですが、Word文書に固有のスタイルはすべてなくなりました。

  • HTMLのみを保持するオプション*は、HTMLコードをコピーする場合にのみ適用されます。 貼り付けオプションメニューの最後のオプションは*テキストのみを保持*です。これは、Wordのテキストだけが本当に必要な場合に選択するオプションです。 このオプションを選択すると、次の[テキストの貼り付け]ダイアログが開きます。

テキストのみを保持

ここから、テキストの書式設定方法を正確に選択できます。 最初のオプションは、書式設定の改行、段落などをすべて削除します。 それを1つの大きなテキストブロックに置き換えます。

ビッグブロック

ドキュメント内の表とすべての書式設定が失われていることがわかります。 * [テキストの貼り付け]ダイアログボックスのオプションで遊ぶことができます。 オプション Match Destination Formatting を選択してみましょう。

一致先のフォーマット

このWebページをブラウザでプレビューすると、次のスクリーンショットのようになります。

ブラウザのWebページ Microsoft-expression-web-gridview

Microsoft Expression Web-マスターページ

この章では、ASP.NETマスターページについて学習します。 マスターページを作成する場合、Microsoft Expression Webの他のページと同じ方法で、マスターページをレイアウトし、スタイルを適用し、ASP.NETコントロールを追加できます。 マスターページで作成したレイアウトとコンテンツは、マスターページにアタッチされたページに適用されます。 これは Dynamic Web Template と同様の概念です。

動的Webテンプレートを使用すると、Webサイトのすべてのページに共通のルックアンドフィールを適用できます。 動的Webテンプレートは設計時に添付されるページに適用されるため、サイト内のすべてのページに変更を適用すると、すべてのページでHTMLが更新される間に遅延が発生する可能性があります。

サーバーがASP.NETを実行している場合、ASP.NETマスターページでは、テンプレートで編集可能な領域を定義することにより、同様の機能を使用できます。 ただし、ページ内のカスタムコンテンツへのテンプレートの適用は、実行時に動的に行われます。

例

CSSテンプレートを使用してマスターページを作成し、このマスターページを使用して他のページを作成する簡単な例を見てみましょう。

ステップ1 *-CSSスタイルシートを使用してさまざまなセクションを定義した *indexl ページを開きます。

CSS

  • ステップ2 *-*ファイル*メニューから、*新規→ページ*に移動すると、新規ページダイアログが表示されます。

マスターページ

  • ステップ3 *-左ペインから[ASP.NET]を選択し、中央のリストから[マスターページ]を選択して[OK]ボタンをクリックします。

ASP.NET

ステップ4 *-上記の画面は、 *Untitled1.master という名前のポップアップを生成します。 このページを保存して、 default.master という名前を付けます。

default.master

  • ステップ5 *-サイト全体で共有されるマスターページにデザインを組み込みます。 それでは、indexlコードから各ページに配置するコンテンツのコードをコピーして、default.masterページに貼り付けてみましょう。

default.master page

ステップ6 *-これで、サイトのすべてのページで使用したいレイアウトができました。 ただし、コンテンツページの作成を今すぐ開始する場合、このレイアウトにコンテンツを実際に入力することはできません。 したがって、マスターページから ASPXコンテンツ*ページを作成する必要があります。 これを行うには、指定したページにコンテンツを追加できるように、*コンテンツ領域*も追加する必要があります。

ASPXコンテキスト

デザインビューで、ページ上のコンテンツを配置する場所を右クリックします。 メインコンテンツセクションにコンテンツを追加し、[Microsoft ASP.NETコンテンツ領域の管理…]をクリックするとします。

  • ステップ7 *-コンテンツリージョンの管理ウィザードで、*リージョン名*を入力し、*閉じる*をクリックします。

地域名

  • ステップ8 *-次のスクリーンショットに見られるように、コンテンツPlaceHolderがメインコンテンツセクションに追加されます。 次に、ASPX Webページを追加する必要があります。

PlaceHolder

ステップ9 *-[ファイル]メニューに移動し、[新規作成]→[マスターページから作成…​]を選択します。

マスターページから作成

  • ステップ10 *-default.masterページを参照し、[OK]をクリックします。

OKをクリック

  • ステップ11 *-新しいASPXページが作成され、すべてのレイアウトスタイルがマスターページから適用されます。

ASPXページ

メインセクションにテキストを追加します。

メインセクション

ステップ12 *-このページを保存して *mypage.aspx を呼び出し、ブラウザーでプレビューします。

mypage.aspx

Microsoft Expression Web-データテーブル

この章では、Webページにデータテーブルを追加する方法を学びます。 新しいHTMLページを作成しますが、ここでは動的WebテンプレートをHTMLページにも適用します。

  • ステップ1 *-[ファイル]メニューに移動し、[新規作成]→[動的Webテンプレートから作成…​]を選択します。

動的Webテンプレート

次のスクリーンショットに示すように、次のダイアログボックスが開きます。

ステップ2 *- *master.dwt ファイルを選択し、[開く]ボタンをクリックします。

Master.dwt

ステップ3 *-Webページを保存し、 *datatablel と呼びます。

Datatablel

  • ステップ4 *-デザインビューで、メインコンテンツセクションに移動し、テキストを削除します。

main-content

  • ステップ5 *-次に、*テーブル→テーブルの挿入…*メニューオプションに移動し、テーブルの挿入ダイアログボックスを開きます。

行と列の数を選択します。 配置、パディング、境界線のサイズと色、背景色など、さまざまなレイアウトオプションを設定することもできます。 完了したら、[OK]をクリックします。

テーブルの挿入

  • 手順6 *-datatablelのデザインビューが次のように表示されます-

デザインビューデータテーブル

ページのコードビューを見ると、Expression Webによって次のコードが追加されていることがわかります。 

<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>

ステップ7 *-[スタイルの管理]タスクパネルで、[ *.. auto-style2] を右クリックします。 名前変更クラスの選択「auto-style2」をクリックします。

auto-style2

ステップ8 *-[クラス名の変更]ダイアログで、[新しい名前]フィールドに *mytable と入力します。 このページの[クラス参照の名前を変更する]にチェックが入っていることを確認して、[OK]をクリックします。

mytable

次に、デザインビューでWebページを確認します。 次のように表示されます-

Webページ

  • ステップ9 *-このテーブルをフォーマットしてスタイルを適用するには、[スタイルの管理]タスクパネルに移動して[*新しいスタイル…]をクリックします。

スタイルの管理

  • ステップ10 *-[新しいスタイル]ダイアログボックスで、境界線の設定を行い、[OK]をクリックします。 データテーブルをフォーマットする別のオプションがあります。 デザインビューで、テーブルを右クリックし、[変更]→[テーブルオートフォーマット…]を選択します。

テーブルオートフォーマット

このダイアログボックスには、さまざまな形式やその他の設定が表示されます。 Professional形式を選択して、[OK]をクリックします。

  • ステップ11 *-Webページのデザインビューは次のようになります-

デザインビューWebページ

デザインビューにデータを追加しましょう。

データの追加

  • ステップ12 *-Webページを保存し、ブラウザでプレビューします。 次のスクリーンショットのようになります。

ウェブページのスクリーンショット

Microsoft Expression Web-発行

この章では、ウェブサイトを公開する方法を学びます。 Microsoft Expression Webは、完全なWebサイト開発ツールです。 Expression Webを使用して、コンピューターとホストアカウント間でファイルを転送できるWebページとサイトを作成できます。

  • ステップ1 *-公開したいサイトを見てみましょう。

公開

Expression Webの最新バージョンでは、次のような新しい公開機能が追加されています-

  • ファイルだけでなく、完全なフォルダーを公開から除外する機能。
  • 現在のページを簡単に公開する機能。
  • ステップ2 *-特定のファイルまたはフォルダーをサイトで公開しない場合は、そのフォルダーまたはファイルを右クリックし、公開から除外します。 * index_2lファイル*を除外するとします。

インデックス2

上記のスクリーンショットに示すように、[公開から除外する]ボタンをクリックします。 同様に、他のファイルも除外できます。

  • ステップ3 *-サイトの設計が完了したので、世界中に公開するためにサイトを公開する必要があります。 Expression Webは、いくつかの異なる公開シナリオをサポートしています。

サイトを公開するには、最初にすべてのページを保存したことを確認する必要があります。 公開プロセスが開始されると、警告がない場合は警告が表示されます。

次に、[ツール]メニューに移動します。

サイトの設計

[ハイパーリンクの再計算…]オプションを選択します。 次の画面で[はい]をクリックします。

ハイパーリンクの再計算

  • ステップ4 *-*サイト*メニューに移動し、*公開*メニューオプションをクリックします。

サイトメニュー

  • ステップ5 *-サイトが初めて公開された場合、次のスクリーンショットに示すように、メッセージ*公開先を追加*を受け取ります。

発行先

  • ステップ6 *-メッセージをクリックすると、次の*接続設定*ダイアログボックスが表示されます。 [接続設定]ダイアログに必要な情報をすべて入力し、[追加]ボタンをクリックします。

接続設定

次のダイアログが表示されます。 [はい]をクリックします。

ダイアログを表示

  • ステップ7 *-公開設定が既に設定されている場合、*現在の公開先に接続*というメッセージが表示されます。 メッセージをクリックするか、[サイトビュー]タブの[接続]ボタンを使用します。

サイトビュー

  • ステップ8 *-公開プロセスが開始されると、ファイルが転送されていることがわかります。 完了すると、ファイルのアップロードが完了したというメッセージが表示されます。

公開プロセス

次回サイトを公開するとき、このプロセスはサーバーサイトとコンピューター上のサイトを比較します。 コンピューターのWebから削除したファイルがリモートサーバーにある場合、それらを削除するかどうかを尋ねるメッセージボックスがポップアップ表示される場合があります。 不要であることが確実な場合は、[OK]をクリックします。

Microsoft Expression Web-バックアップWebサイト

この章では、Expression Webを使用してサイトをローカルコンピューターにコピーする方法を学習します。 Windowsエクスプローラーとは異なり、Expression Webにはごみ箱はありません。 ウェブサイトまたはサイト内のページを誤って削除した場合、復元状態になります。

  • ステップ1 *-Webサイトのバックアップを取得するには、Expression Webでサイトを開きます。

バックアップ

  • ステップ2 *-[ツール]メニューに移動し、[ハイパーリンクの再計算…​]オプションをクリックします。

ツールメニュー

次のスクリーンショットに示すように、[はい]をクリックします。

ハイパーリンクコマンドの再計算

  • ステップ3 *-次に、*サイト*メニューに移動し、*公開*メニューオプションをクリックします。

公開

  • ステップ4 *-このサイトを初めて公開する場合、次のスクリーンショットに示すように、*公開先を追加*というメッセージが表示されます。

公開先の追加

  • ステップ5 *-メッセージをクリックすると、*接続設定*ダイアログボックスが表示されます。

メッセージボックス

[名前]フィールドに、サイト名を入力します。 [接続タイプ]ドロップダウンメニューから[ファイルシステム]を選択し、Webサイトをバックアップする場所を参照します。 次に、[追加]ボタンをクリックします。

  • ステップ6 *-フォルダが現在存在しない場合、作成するように求められます。 [はい]をクリックすると、Webが作成されます。

Web作成

  • ステップ7 *-接続したら、[表示]ドロップダウンをクリックして[すべてのファイル]を選択します。

すべてのファイル

  • ステップ8 *-左側のすべてのファイルを選択します。

左側

ステップ9 *-*右矢印（→）ボタンをクリックします。

右矢印

公開プロセスが開始されると、ファイルは転送されているように見えます。 完了すると、ファイルがアップロードされたことを示すメッセージがポップアップ表示されます。

Microsoft Expression Web-アドイン

この章では、Expression Webにアドインをインストールする方法を学習します。 Expression Webアドインは、Expression Web内で追加または強化された機能を提供する外部ソフトウェアパッケージです。

アドインは、https://msdn.microsoft.com/en-us/expression/jj873995からダウンロードできます。 たとえば、AddFeedアドインをダウンロードしましょう。

  • ステップ1 *-Expression Webを開いて、[ツール]メニューに移動します。 [アドイン…]メニューオプションをクリックします。

アドイン

  • ステップ2 *-アドインを初めてインストールする場合は、[アドインの管理]ダイアログボックスに空のリストが表示されます。 [インストール]ボタンをクリックします。

インストール

ステップ3 *- *AddFeeds.xadd ファイルを選択し、 Open ボタンをクリックします。

AddFeeds

  • ステップ4 *-インストールすると、次の画面が表示されます。 アドインを有効にするかどうかを尋ねられます。 画面には、インストールされている特定のアドインに関するすべての情報が表示されます。 はいをクリックします。

特定のアドイン

  • ステップ5 *-インストールされているアドインに応じて、いくつかの場所で利用できます。

インストールされているアドイン

ステップ6 *-次に、*挿入*メニューに進みます。 アドインのインストール後に追加される TwitterまたはRSSフィード*オプションが表示されます。

挿入

要件に応じて、同じ手順に従って追加のアドインをインストールできます。

「https://www.finddevguides.com/index.php?title=Microsoft-expression-web-quick-guide&oldid=79123」から取得
Powered by MediaWiki