FrontPage のデザイン ビューに、サッカー関連会社のホーム ページが表示されています。ポインタが "スポーツ用品" というテキストを選択し、[蛍光ペン] ボタンをクリックします。テキストが黄色で反転表示されます。

あなたは自分の Web ページをより魅力あるものにしたい。こんなテキストを反転表示させて目立たせてみたり。すると、ふとこんな考えが浮かびます。反転させたテキストは HTML 上でどう書かれているんだろう。

ポインタが [コード] をクリックします。ページのコードが表示されます。

以前のバージョンの FrontPage では、HTML は別画面に切り替えて確認していました。しかし、新たなバージョンではもっと便利な方法で HTML ソースを確認できます。

ポインタが [分割] をクリックします。上部に [コード] ウィンドウ、下部に [デザイン] ウィンドウがある分割ビューが表示されます。

それは、FrontPage 2003 の分割ビューです。デザインとコードが別々のウィンドウで同時に表示されます。

ポインタが [デザイン] ウィンドウの "スポーツ用品" を選択します。すると、[コード] ウィンドウ内でそのテキストのコードが反転表示されます。

こちらの機能もご覧ください。[デザイン] ウィンドウで何か選択をすると、[コード] ウィンドウが自動的に選択項目のコードを探し当てます。これは便利で、必要なパーツのためのコードを探し回らなくてもいいのです。

ポインタがコードをスクロールし、[コード] ウィンドウ内の <img> タグを選択します。それに応じて、[デザイン] ウィンドウがスクロールし、画像が選択され、サイズ変更ハンドルが表示されることにより、対応する画像がわかります。

逆の方法でものを探すことも可能です。たとえば、このコードには画像タグが入っています。しかし、どの画像にリンクしているのでしょう? そこで [コード] ウィンドウ上のタグをクリックすると、[デザイン] ウィンドウがスクロールしてどの画像が使われているかがわかります。

[デザイン] ウィンドウで、ポインタが "大きな" というテキストを選択し、[太字] をクリックします。[コード] ウィンドウでは、そのテキストの周囲に <b> および </b> タグが表示されます。次に、ポインタが [デザイン] ウィンドウ内でサッカー ボールの画像をクリックします。すると、[コード] ウィンドウ内のコード行が反転表示されます。ポインタが [左揃え] をクリックします。デザインが変更され、[コード] ウィンドウに align="left" が追加されます。

それだけではありません。[分割ビュー] での編集だって可能なのです。このテキストをボールド表示すると、コード内にタグがひとりでに現れます。この画像の配置をちょっと変えてみましょうか。このとおりです。ビューを切り替えなくても、変更がコードに反映されていることが確認できますね。 [コード] パネルからの操作についても同様です。

[コード] ウィンドウで、3 行ほど下の <p> タグの後に「class="mystyle"」というテキストが入力されます。ポインタが [最新の情報に更新] をクリックすると、[デザイン] ウィンドウにスタイルの変更が反映されます。

タグに新しいスタイルを適用し、[最新の情報に更新] をクリックすると、[デザイン] パネルに変更が反映されます。変更後のコードの確認作業がどのくらい楽になるか、想像してみてください。

ポインタが [デザイン] をクリックします。分割ビューが閉じてデザイン ビューが表示され、デモで行われたすべての変更が反映されます。次に、アニメーション テキスト "仕事での素晴らしい瞬間をあなたにも" が表示されます。その下に、URL として http://www.microsoft.com/office が表示されます。

ページのデザインから、コードの制御に至るまで、FrontPage 2003 ならずっと簡単に行えます。