ようこそホームページ作成講座に、本講座はプロ仕様のマイクロソフト社製ＨＰ編集ツール（Ｅｘｐｒｅｓｓｉｏｎ　Ｗｅｂ４）を学ぶ講座です、多彩な機能を初心者でも理解しやすく解説して行きます。

チュートリアでは、以下の準備が必要です。

  1. Ｅｘｐｒｅｓｓｉｏｎ　Web4のダウンロードとインストール
  2. 雛形は本講座のトップ画面です。
  3. 画像はコピーしても自分独自で用意してもかまいません。

それでは早速取り掛かるとしましょう。

Web４ツールのオープン

　Web4のインストールが済み最初に立ち上げた時の画面（ワークスペース）は以下のようになります。

WorkSpace

ページサイズの確認と変更

　選択できるページ サイズは、標準の画面解像度である 640 x 480、800 x 600、1024 x 768 のいずれかです。Microsoft Expression Web では、現在の画面解像度に一致する値が自動的に選択されますが、これより低い値も使用できます。現在の画面解像度を超えるウィンドウ サイズは選択できません。

pagesize

ページサイズ変更は？

chengeSize
操作
  1. 編集タブをコード以外にする。
  2. メニュー[表示]－[ページサイズ]－[ページサイズの変更]をクリックします。
  3. ページサイズの変更ダイアログが表示されるので一覧から目的サイズを選択します。
  4. [OK]を押下します。

サイトを作成する

　ローカルに作業ホルダーを作成します。

newsite1
操作１
  1. メニュー[サイト] － [新規サイト] をクリックします。
  2. 新規作成ダイアログが表示されます、[参照]をクリックし新しいサイトの場所を指定します

　　　●新しいサイトの保存場所が表示されます。（初期はデフォルトのフォルダーが表示されます）

newsite2
操作２
  1. 新しいフォルダーを作成します。
  2. ’新しいフォルダー’ダイアログが表示されるので名前に’NewSite’と入力します。
  3. [OK]を押下します。
  4. [開く]を押下します。
  5. [新規作成] ダイアログ ボックスで、 [OK] をクリックします。

注意１：フォルダー名には日本語を使わない

注意２：チュートリアルでは、サイトを複数格納する為、フォルダの場所に’homepage’を指定しています。

　　●新規サイトのワークスペースが表示される。

NewWorkSpace

HTMLファイル名変更

サイト作成後のHTMLファイル名は’default.html'です。名前を’index.html'に変更します。

nameChenge
操作
  1. フォルダーリストの'default.html’をクリックします。
  2. マウスの右クリックでドロップダウンメニューを表示します。
  3. [名前の変更]をクリックし、名前を’index.html’に変更します。
  4. 名前の変更の確認ダイヤログボックスで[はい]を押下します。

index.htmlファイルを開く

操作
  1. メニュー[ファイル]－[開く]をクリックします。
  2. ’ファイルを開く’ダイヤログでフォルダー’NewSite’を展開します。
  3. index.htmlを選択して[開く]をクリックします。

[参考]フォルダーリスト（パネル）から開く場合

  1. index.htmlを選択します。
  2. 右クリックで表示される’クイックメニュー’の[開く]をクリックします。

コード編集画面への切り替え

サイト作成後の編集画面は[分割]タブになっています。’デザイン’を見ながら’コード’の編集が可能になります。

code designTab

Webの言語を設定する

　HTMLファイルには’ページ言語’及びHTMLエンコードを設定します。サイトの標準のページ エンコードを設定すると、そのサイト内で作成する新しいページに content-type <meta> タグが追加されます。

web_langage
サイトの設定操作
  1. メニュー[サイト]－ [サイトの設定] をクリックし、サイト設定ダイアログの[詳細] タブをクリックします。
  2. 言語設定で[サーバメッセージの言語]（日本語）及び[標準のページエンコード]（Ｕｎｉｃｏｄｅ（ＵＴＦ－８）を選択します。
  3. [OK]を押下します。
encode ページの設定操作
  1. ビュータブをコードに切り替える
  2. 右クリックでサブメニュー表示し[エンコード]選択します
  3. ’ページのプロパティ’が表示されます。
  4. ページ言語（日本語）及びＨＴＭＬエンコード（Ｕｎｉｃｏｄｅ（ＵＴＦ－８）を選択
  5. [OK]を押下します。

　　●コードビューに’meta’データが表示される

web_lang_code

ファイルの保存

作業中のファイルが変更されると編集タブの上部表示のファイル名がindex.html*となります。

操作
  1. メニュー[ファイル]を展開します。
  2. [保存]又は、[すべて保存]をクリックします。
  3. ファイルの＊印が消えます。

注意：保存作業はこまめにしましょう。

イメージフォルダーの作成

folder
作成操作
  1. フォルダーリストの’C\homepage\NewSite’を右クリックしメニューを表示します。
  2. メニューの[新規]を展開し[フォルダー]を指定します。
  3. フォルダーリストに’新しいフォルダー’と表示されるので名前を’images’に変更します。
イメージの挿入操作
  1. この後Ｗｅｂ４を終了した時このフォルダーに本講座トップ画面をコピーします。（全7枚）

 

サイトを閉じてＷｅｂ４を終了します。

次の項目を学習する前にサイトを一度閉じて休憩しましょう。

終了操作
  1. 作業ファイルが保存していない場合メニュー[ファイル]－[すべてを保存]又は、アイコンをクリックします。
close

 
  1. メニュー[サイト]－[閉じる]を押下します。

close2

close3
  1. メニュー[ファイル]－[終了]を押下します。