デスクトップ上で右クリックし、Webページを保存するフォルダを作成します。
例）フォルダ名「newsite」

デスクトップにあるのショートカット、または、スタートボタンから「ホームページビルダー」を起動します。

ホームページビルダーには「かんたん」「スタンダード」「エディターズ」の３つの編集モードがあります。ここでは、「標準モード」で「エディターズ」の画面で説明します。「表示」〜「編集スタイルの切り替え」〜「エディターズ」を選択します。

ほとんどの機能はメニューバーから選択して操作ができます。

たくさんのツールバーがあります。メニューバーの「表示」〜「ツールバー」で表示するツールバーを選択できます。

「ページ編集」、「HTMLソース」、「ページ/ソース」、「プレビュー」の４つのモードをタブによって切り替えることができます。

	ワープロソフトのようにWebページを編集できます。
	作成中のWebページのHTMLソースを表示し、編集できます 。
	ページ編集とソースの両方を表示します。
	ブラウザで見たときの状態を確認できます。編集はできません。

「ページ編集」で現れるピンク色の枠を「フォーカス枠」といい、操作の対象になっていることを示します。
例）

ツールバーの「ページの新規作成ボタン」のとなりの▼をクリックすると、ダイヤログが現れます。

ここでは、「標準モードで新規作成」を選択します。

　練習として自己紹介ページを作成してみましょう。タブで「ページ編集」モードにし、ワープロ感覚で文字を書いていきます。


時々、タブで「HTMLソース」を見てみると操作によってHTMLタグが挿入されていくのがわかります。

★Point★
空白のスペースを連続して入力しても、スペース１つ分だけしか認識されない場合があります。

改行には２タイプあります。

操作	改行の種類	タグ	編集画面	プレビュー
「Enter」	通常の改行	<br>		あいうえお かきくけこ
「Shift」を押しながら「Enter」	段落 (行間の大きな改行)	<p>		あいうえお かきくけこ

　各ページにページタイトルを挿入します。
ホームページビルダーのメニューの「編集」〜「ページ属性」〜「ページ情報」〜「ページタイトル」の欄にページのタイトルを入力ます。


ホームページビルダーのタイトルバーにページタイトルが表示されます。

　「ファイル」〜「名前を付けて保存」を選びます。
保存する場所の例：「newsite」
ファイル名の例：「index.html」

デスクトップのフォルダ「例：newsite」にある「例：index.html」をダブルクリックしブラウザを起動します。


ブラウザの青いタイトルバーにページタイトルが表示されていることが確認できます。

今後、ある程度の作業が進んだ際には、ホームページビルダーで「上書き保存し」、ブラウザで「更新」し、見え方を確認します。

文字をドラッグして範囲を指定し、書式のツールバーの「フォントサイズの拡大・縮小ボタン」でフォントサイズを変えられます。同様に範囲指定し、「カラーパレット」で色を指定すると文字の色を変えることができます。

（例）

フォントサイズ１　フォントサイズ２　フォントサイズ３ フォントサイズ４ サイズ５　サイズ６　サイズ７ 赤、青、緑、黄、黒、白 明朝体、ゴシック体

★Point★
Webページ作成ソフトでもワープロソフトのようにフォントの種類を指定をすることができますが、Webページを見る側が指定されたフォントを持っていないと、他のフォントに置き換わってしまいますので注意が必要です。

　段落を選択し、「インデントボタン」で、行頭を移動することができます。
（例）

ここは段落１ ここは段落２（１段階のインデントをしています） ここは段落３（２段階のインデントをしています）

　段落や表、画像などをフォーカス枠で選択した状態で「左寄せ」、「センタリング」、「右寄せ」、ボタンをクリックすると、ページ内の位置を指定できます。
（例）

左寄せ

センタリング

右寄せ

　「挿入」のツールバーの「水平線ボタン」で水平線を挿入できます。文章の区切り等に使います。
（例）

ここは水平線の上 ここは水平線の下

　ツールバーの「箇条書きボタン」で箇条書きの書式に設定できます。「Enter」のたびに箇条書きの点や番号が自動的に作られます。ツールバーの「レベル上げ、下げ」ボタンで箇条書きのレベルを上げたり下げたりができます。

（例）

番号なしリスト 番号なしリスト 番号つきリスト 番号つきリスト

ツールバーの「表の挿入」ボタンをクリックし表の行×列数を指定します。


（例）

１行目、１列目 １行目、２列目 １行目、３列目 ２行目、１列目 ２行目、２列目 ２行目、３列目 ３行目、１列目 ３行目、２列目 ３行目、３列目

表全体の選択	セルの選択	セルの結合	セルの分割
		１ ２ ３ ４ ５ ６ ７	１ ２ ３ ４ ５ ６ ７ ８ ９ １０

表のツールバーを使うと、行や列の挿入、削除、コピー、セルの分割、結合などが操作できます。

　ページの何もない部分をクリックし、「カラーパレット」で色を指定し、「適用」ボタンをクリックすると背景に色をつけることができます。

　GIF形式、JPEG形式等の画像をWebページを保存したフォルダに入れておきます。「挿入」〜「画像ファイル」〜「ファイルから」（またはツールバーの「画像ファイルの挿入」ボタン）、画像ファイルを選択すると


Webページに画像を貼りつけることができます。

　画像を右クリックし、で「属性」のダイヤログを表示させます。
「代替テキスト」の欄に画像の説明文を入れます。

★Point★
　画像ファイルが表示できない環境や、音声読み上げブラウザの利用者等への配慮から、画像には代替テキスト（ALT属性）を必ず入力するようにします。

　画像をクリックすると■印の「ハンドル」が現れます。「ハンドル」をドラッグすると画像の表示サイズを変更できます。


　この操作だけでは、元画像のサイズは変わりません。元画像のサイズを小さくするためには、画像を右クリックし「画像を編集」〜「画像の編集」をします。



「表示サイズで保存」にチェックを入れ、「OK」ボタンをクリックします。

　GIF形式の画像は、指定した１色を透明にすることができます。画像を右クリックし「画像を編集」〜「画像の編集」〜「透明化」で透明化したい色を「スポイト」ボタンで選択し「ＯＫ」をクリックします。　

　

透明化していない画像

→

透明化した画像

　リンクしたい文字（または画像）をドラッグし、「挿入」〜「リンク」（または「リンク挿入」ボタン）でリンク先のファイルを指定します。

→ドラッグ→

→→

→リンク先ファイルを指定→

→リンク完成

メニューの「ファイル」〜「名前を付けて保存」〜ファイル名を指定し保存します。