ホームページを作る

1ホームページを作る前に使用する画像を確認しましょう

pm001.png

1ホームページで使用する画像をチェックして、編集をして使える画像にしましょう。

 

保存した画像を開いて、画像の上で「右クリック」して、メニューから「プログラムから開く」を選択し、「Microsoft Office Picture Manager」をクリックしてMicrosoft Office Picture Managerを起動します。

pm002.png

2Microsoft Office Picture Managerが起動し、画像が表示されました。

pm003.png

3Microsoft Office Picture Manager

 

@画像の編集をクリックすると、右側にA編集メニューが表示され、Bで画像を選択して編集します

pm004.png

4、トリミングを実行してみましょう。

編集メニューから「トリミング」を選択します。

@トリミング設定で縦横比を34を選びます

画像にはトリミング用のハンドルが表示され、マウスポインターの形がハンドルと同じ形になったら、ドラッグしてトリミングの形を作ります。

 

さざんか教室P-1/12

pm005.png

5、トリミング

 

@ドラッグしてトリミングの形が整ったら、AOKをクリックします。

pm006.png

6、回転と反転

 

トリミングが完了して、トリミングされた画像が表示されました。

 

次に@メニューからA「回転と反転」を選択します

pm007.png

7、回転と反転

 

傾いている画像を選んで、傾きを修正します。

pm008.png

8、回転と反転

 

@角度指定の▲をクリックして、角度を指定します

画像が回転して、傾きの修正をします。

 

さざんか教室P-2/12

pm009.png

9、回転と反転

 

傾きの修正が終了した状態で、画像の編集のメニューから、トリミングを選びます。

pm010.png

10、回転と反転

 

傾きの画像から使用できる範囲をトリミングします。@縦横比を34、Aハンドルでトリミング範囲を指定します。BOKボタンをクリックします。

pm011.png

11、回転と反転

 

傾きが修正されました。

pm012.png

12、自動修正

 

画像が少々暗いので、自動修正ボタンをクリックして明るさの修正をします。

 

さざんか教室P-3/12

pm013.png

13、自動修正

 

自動修正は連続して修正できません、一旦保存してから、明るさの修正をします。

pm014.png

 

14Microsoft Office Picture Managerの終了

 

Microsoft Office Picture Managerを終了すると保存を問い合わせする、ダイアログが表示されますので「上書き保存」をしてください。

 

index(TOPページ)を作る

すでにindex(TOPページ)が作成され、追加する場合はホームページを作る2をご覧ください。

画像の挿入 ウエブビデオスタジオで作る

indexにサムネイル画像5枚を表示して、ページのご案内をします。

HP001.png

15ホームページビルダーを起動すると、編集スタイルを選択する画面が表示されますので、「スタンダード」を選択してA「OK」をクリックします。

 

さざんか教室P-4/12

HP002.png

16ホームページビルダー

 

新規ページのアイコンをクリックして、新しいページを作成します。

HP003.png

17ウエブビデオスタジオの起動

ツール」から「ウエブビデオスタジオの起動」をクリックしてウエブビデオスタジオ起動します。

※ ビルダーを起動して、新しいページを開いてからの操作が無難です。

※ すでにindexのページが作成され、追加する場合はindexを開いてから、この作業を開始してください。

HP004.png

18オープニングダイアログが開きますので、「閉じる」をクリックします。

HP005.png

19ウエブビデオスタジオ

ウエブビデオスタジオが起動しました

「画像ファイルを挿入」をクリックします。

 

さざんか教室P-5/12

HP006.png

20ウエブビデオスタジオ

画像ファイルを挿入」ダイアログが開き、画像を選択する画面が表示されます。

  画像を選択する画面が開きます。今回使用する画像を保存してあるフォルダを開いてください。

  縮専で作成した「160」を開いてください。

HP008.png

21ウエブビデオスタジオ

今回はtopページに画像を挿入するので5枚を選択

 

※呼び込んだファイルの場所をしっかり覚えていて下さい

HP008.png

22画像を選択するには、最初の画像を選択して、「Shift」キーを押しながら、最後の画像をクリックすると、5枚全てが選択されます。

HP010.png

23選択された画像5枚を確認して「開く」をクリックします。

 

さざんか教室P-6/12

HP009.png

24ウエブビデオスタジオ

画像が入りました

※呼び込んだ画像の枚数の増減はこの画面で操作できます

 削除の場合は、右上の画像一覧で画像の上で右クリックして画像を削除してください。

追加する場合は「画像ファイルの挿入」から画像を選択して挿入してください。

webbideo006

25ウエブビデオスタジオ

連続写真を送る」のアイコンをクリック

 

※連続写真出力ウィザードが開きます。

 プロジェクト全体を選択して、次へをクリックします。

webbideo007

26連続写真ウィザード

出力の間隔、枚数の設定を指定します
枚数で設定」で枚数を表示します。
画像を5枚挿入しましたので、「5」を入力します。次へクリック

webbideo008

27連続写真ウィザード

 

画像の大きさ・画像のファイル形式を設定します。今回はすでに画像サイズを160×120に設定してますので、確認をして次へをクリックします。

 

さざんか教室P-7/12

webbideo009

28連続写真ウィザード

 

表の設定をします。
TOPページに横方向5枚の画像を挿入するための表を作成します、同時に画像も入ります。
すなわち、表の作成画像の挿入を同時に行ないます。

webbideo010

29ウエブビデオスタジオ

ウエブビデオスタジオが閉じ、画像表示するページが開きます。すでに他の画像が表示されている場合は、ページのカーソルのある場所に入ります。

 

TOPページに画像が入りました

ページを作る

上記の操作とほぼ同じですが、異なっている処だけ説明します。

ビルダーのメニューから新規作成を開いて新しい800のページを作成します。

webbideo014.png

30ウエブビデオスタジオ

 

1.2.3.の作業を同様に進めながら、挿入する画像を選択で「800」のフォルダを開いて、枚数を10選択します。

webbideo013.png

31連続写真ウィザード

 

5.6.と同様に進め「枚数」で10に指定します。

 

さざんか教室P-8/12

webbideo012.png

32連続写真ウィザード

画像サイズ指定画面では800×600に指定します。

webbideo015.png

33連続写真ウィザード

横方向に配置する画像の枚数を「1に指定します。

webbideo011.png

34連続写真ウィザード

ビルダのページに縦一列画像が入りました。

ページの保存

 

画像の編集

top08

35ページの保存

名前を付けて保存をクリックします。

 

さざんか教室P-9/12

top09

36ページの保存

ページの保存をします。

160ピクセルで作成した、保存先はindex.htmlです。
@保存先 ○○のホームページ
Aファイル名を入力 index.html
B保存をクリック

webbideo021].png

37ページの保存

ページに使用した画像を保存します。

上書き保存でも新しい画像を使うと表示される事もあります。
@画像ファイルを全て選択して
A保存場所を選択して 参照ボタンをクリック

 

forud004.png

38ページの保存

画像を保存(続き)

※保存先のフォルダを選択するときの注意。

左図のようにフォルダが開いているものと、開いてないものがあります。

forud05.png

39ページの保存

画像を保存(続き)

保存するフォルダまで開かないと、とんでもない処に保存されてしまいますので、保存するフォルダまでしっかり開きましょう。フォルダを開くにはフォルダをダブルクリックすると、フォルダが開きますので、次へ進む事ができます。

さざんか教室P-10/12

forud06.png

40ページの保存

画像を保存(続き)

目的のフォルダにたどり着いたら、フォルダを開いて「OK」をクリックします。

top11

41ページの保存

保存されました。

同様に「800」で作ったページも保存しましょう。

webbideo011.png

 

42ページの保存

 

「新規作成」で作成した新しいページを「名前を付けて保存」します。

webbideo016-1.png

43ページの保存

@保存先はこのページを作成した画像「160」と「800」の画像の入ったフォルダを指定します。

A800のフォルダを選択します。

800のフォルダをダブルクリックすると、フォルダを開く事ができます。

webbideo016-2.png

44ページの保存

ページの保存

@保存先に800が表示されていることを確認します。

Aページの名前を入力します。

C保存をクリックします。

 

さざんか教室P-11/12

webbideo018.png

45ページの保存

画像の保存

※ページで使用する画像を保存するフォルダを指定します。

webbideo019.png

46ページの保存

画像の保存

保存場所を確認して、「保存」をクリックします。

webbideo011.png

47ページの保存

 

ページが保存されました。

 

さざんか教室P-12/12