サイト内検索: ナビゲーション リンクのスキップ

  昨日:10  本日:1  合計:78853


Visual Web Developerの操作(静的ページ1)

 さて、いよいよVisual Web Developerの説明をしていきます。
 まずは、静的ページ(html,htmの拡張子)を作ってみましょう。
 動的ページ(asp,aspxの拡張子)を作成するためのツールですが、その前に、前章で説明した「まずはメモ帳で作成」と同じ内容でテキストエディタとしての性能の違いをみていきたいと思います。

■ Visual Web Developer 2008 Express Edition の起動

1.スタートメニューから、[すべてのプログラム]→[Microsoft Visual Web Developer 2008 Express Edition]を選択すると、起動することができます。初回起動だけ以下のダイアログが現れます。
 

2.続いて、スタートページが表示された状態で起動します。
※初期設定では、左側のツールボックスが「自動的に隠す」設定になっていますが、表示された状態でツールボックス内右上の画鋲のようなボタンで「常に表示」設定にできます。
 

3.新規のWebサイトを作成するため上図の赤枠で示した部分をクリックすると、以下のダイアログが現れます。
 まず、テンプレートから「空のWebサイト」を選択し、場所に「マイドキュメント\Visual Studio 2008\WebSites\WebSite1」と表示されている最後の「\WebSite1」を「HomePage」に書き換えて[OK]ボタンをクリックします。
 なお、.NET プログラミングを想定していないので、言語を変更する必要はありません。
 

4.空のWebサイト「HomePage」を開いているという意味で、右のソリューションエクスプローラが空の状態で表示されていますので、「C:\...\HomePage\」の上で右クリックをして、表示されたメニュー中の「新しい項目の追加」を選択します。
 

5.ここでは、静的ページ(html,htmの拡張子)を作成しますので、テンプレートから「HTMLページ」を選択し、名前を「test.htm」として新しいページを追加します。
 

6.新しいページ「test.htm」がソース画面で開きます。この状態がメモ帳で開いた状態と同じということです。
 

7.<title>~</title>に ホームページの練習、<body>~</body>に 初めてのホームページです。と書いたらできあがりです。
※冒頭の<!DOCTYPE・・・は、文書型宣言というもので、その文書がどんな定義(DTD)に基づいて記述されるかを示すものです。まぁ特に気にしずに、そのままにしておきましょう。

1
2
3
4
5
6
7
8
9
10
11
<!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>
  <title>ホームページの練習</title>
</head>
<body>
初めてのホームページです。
</body>
</
html>

8.Visual Web Developer 2008 での編集状態における表示内容は、実際にブラウザで表示した時の内容にかなり近いものですが、やはりブラウザで実際に表示してみるのが一番です。直ぐにブラウザで表示して確認するには、[Ctrl]+[F5]キーを押してください。このキー操作は、上部メニューから[デバッグ]→[デバッグなしで開始]を選択するのと同じです。

9.本来の目的がWebプログラミングの開発ツールのため、Webプログラムを開始(実行)する指示によってブラウザに表示される訳ですが、[F5]キーによる「デバッグ開始」によって、次のダイアログを通過しておくと便利です。これによって、サイトが格納されているフォルダに "Web.config" というファイルが作られます。
 

10.続いて以下のダイアログが現れた場合は、チェックを入れて[はい]ボタンをクリックしてください。
 


Copyright (C) 2009-2009 ケンゾー
初版:2009年4月17日、最終更新:2009年4月21日
http://www.xox.bz/