SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Expression Webチュートリアル

Expression WebでASP.NETと連携するWebフォームを作ってみよう

Expression WebにおけるASP.NETコントロールの利用


  • X ポスト
  • このエントリーをはてなブックマークに追加

本稿では、マイクロソフト社のWebオーサリングツール「Microsoft Expression Web」を利用して、ASP.NETと連携したWebフォームを作る方法を解説します。Microsoft Expression Webは、ASP.NETとの連携にも優れています。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 マイクロソフト社のWebオーサリングツール「Microsoft Expression Web」(以下、Expression Web)を使って、ASP.NETと連携したWebフォームを作る方法を解説します。Expression Webは、ASP.NETとの連携にも優れています。

 本稿では、HTML形式で構成されているWebページをaspxファイルに置き換える形で、Webフォームを作成してみます。

 具体的には、まずダイナミックWebテンプレート(前稿参照)からWebページを作成し、ASP.NETが利用できるようにASPX形式にした後、Webユーザーコントロール(ASCXファイル)を組み合わせてWebフォームを作成し、ブラウザでプレビューするまでの手順を説明します。

対象読者

  • Expression Webをある程度触ったことがある方
  • デザイン部分も担当する必要があるASP.NET開発者
  • ダイナミックWebテンプレートについて理解のある方
  • 他のWebページとデザインが統一されたWebフォームを作りたい方

必要な環境

  • Windows Vista、Windows XP Service Pack 2、またはWindows 2003 Service Pack 1以上
  • .NET Framework 2.0以降
  • Microsoft Expression Web

ダイナミックWebテンプレートからWebページを作成

 Expression Webでは、Webサイトのページデザインを統一するため、ダイナミックWebテンプレートを作成してから、それを元に個々のWebページを作成していくのが基本となります。なお、本稿で利用しているテンプレート(master.dwt)は添付ファイルに含まれています。

  1. [ファイル]-[新規作成]-[ダイナミックWebテンプレートから作成]を選択します。
  2. [ダイナミックWebテンプレートの適用]ダイアログボックスにて、作業中のサイトの中から適用するダイナミックWebテンプレートを選択して、[開く]ボタンをクリックします。
    [ダイナミックWebテンプレートの適用]ダイアログボックスから選択して[開く]ボタンをクリック
    [ダイナミックWebテンプレートの適用]ダイアログボックスから選択して[開く]ボタンをクリック
  3. ダイナミックWebテンプレートから新規Webページが生成され、「(1 / 1) ファイルが更新されました。」との情報メッセージが表示されるので、[閉じる]ボタンをクリックします。
    「(1 / 1) ファイルが更新されました。」メッセージにて、[閉じる]ボタンをクリック
    「(1 / 1) ファイルが更新されました。」メッセージにて、[閉じる]ボタンをクリック
ダイナミックWebテンプレートからすばやくWebページを作成するには
 [フォルダ一覧]作業ウィンドウから適用したいダイナミックWebテンプレートを直接右クリックして、[ダイナミックWebテンプレートから新規作成]を選択すると、ダイナミックWebテンプレートからすばやくWebページを作成できます。
対象となるDWTファイルを右クリックして、[ダイナミックWebテンプレートから新規作成]を選択
対象となるDWTファイルを右クリックして、[ダイナミックWebテンプレートから新規作成]を選択

編集可能領域内の編集

 ダイナミックWebテンプレートの編集可能領域には、あらかじめダミーテキストが入っています。これらを書き換えてWebページを完成させていくわけですが、クイックタグセレクタを利用すると効率よく作業が行えます。

 例えば、この例では現在「見出し1」スタイルに入っている文字「Headline 1」を「お問い合わせ」に書き換えてみます。クイックタグセレクタを利用せずに直接文字を書き換えると、必要なタグまでなくなってスタイルが削除されたりする場合があるので注意してください。

  1. 見出し1のスタイルが適用されている「Headline 1」の部分にカーソルを移動します。
  2. クイックタグセレクタバーの<h1>タグ右側の▼をクリックして、[タグ内容の選択]を選択します。すると、<h1>タグ内の要素だけが選択されるようになります。
     
  3. <h1>タグ内のテキストだけが選択された状態で、「お問い合わせ」と入力します。
     
  4. 「お問い合わせ」に文字が書き換えられました。
     
  5. 最後に、不要なテキストがあれば削除します。

次のページ
ASPXファイルとして保存

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Expression Webチュートリアル連載記事一覧

もっと読む

この記事の著者

小濱 良恵(コハマ ヨシエ)

Microsoft MVP for Expression WebMSソフトの解説書やWeb記事を執筆するテクニカルライター。Expression Webの前身となるFrontPageは2000バージョンから使用しはじめ、個人サイト(www.wanichan.com) においてFrontPageやExpression Webをはじめ、Microsoft Office全般などの総合情報&T...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/1832 2009/04/14 11:19

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング