ホームページ作成・更新講座 夏のコンピュータ学習会 画像

Presentation on theme: "ホームページ作成・更新講座 夏のコンピュータ学習会 画像"— Presentation transcript:

1 ホームページ作成・更新講座 夏のコンピュータ学習会 画像

2 ホームページを作る前に コンセプト（概念） イメージ 他のホームページを参考にする 研究所HPよりリンク集 夏のコンピュータ学習会
作る前に考えておきたいこと 他のホームページを参考にする

3 作成・編集 送る（アップロード） ＦＦＦＴＰ ホームページ作成・更新の流れ ホームページビルダー 夏のコンピュータ学習会
ホームページのデータを作成・編集するのはホームページビルダー データをサーバーへ転送するのはＦＦＦＴＰ 送る（アップロード） ＦＦＦＴＰ

4 夏のコンピュータ学習会 デスクトップにフォルダをつくる ホームページのデータを入れておくフォルダを先に作っておく

5 夏のコンピュータ学習会 デスクトップにフォルダをつくる デスクトップに作っておくと分かりやすい 後で移動も可能

6 夏のコンピュータ学習会 新規作成する

7 夏のコンピュータ学習会 コンセプトがきまっていれば テンプレートを利用した方が楽に作成できる

8 夏のコンピュータ学習会 業種別等のテンプレートがある

9 夏のコンピュータ学習会 新規（白紙から）作成していく

10 夏のコンピュータ学習会 はじめに名前をつけておく

11 夏のコンピュータ学習会 最初のページは自動的に「index.html」という名前がつく デスクトップのフォルダに保存する

12 夏のコンピュータ学習会 作成開始 カーソルの部分へ文字を入れていく

13 夏のコンピュータ学習会 文字を入れる 文字の挿入をクリック

14 夏のコンピュータ学習会 文字の変化 文字を飾る 変化させる文字の部分を 範囲指定

15 夏のコンピュータ学習会 太文字 太文字にするのは「B」

16 夏のコンピュータ学習会 斜字 斜体は「I」

17 夏のコンピュータ学習会 文字を大きく A＋ボタンで大きくなる

18 夏のコンピュータ学習会 文字を小さく A－ボタンで小さくなる

19 夏のコンピュータ学習会 写真の挿入 写真を挿入する

20 夏のコンピュータ学習会 ファイルから：自分で撮った写真が入れられる 素材集から：ビルダー附属の写真が入れられる

21 夏のコンピュータ学習会 素材集から任意の写真を選択する

22 夏のコンピュータ学習会 選択後「次へ」をクリック

23 夏のコンピュータ学習会 任意のサイズを選ぶ 「中」が無難

24 夏のコンピュータ学習会 写真をはっきりさせたいときにチェックマークを入れる

25 夏のコンピュータ学習会 縁飾りをつけることもできる そのままならば「完了」

26 夏のコンピュータ学習会 写真が入った

27 夏のコンピュータ学習会 背景に色を入れる 背景に色を入れる 「ページの属性」

28 夏のコンピュータ学習会 背景/文字色のタグから背景色を選ぶ

29 夏のコンピュータ学習会 背景色が変わった

30 夏のコンピュータ学習会 ルビを振る 漢字にルビをいれる

31 夏のコンピュータ学習会 ルビを振る 書式→文字飾り→ルビ

32 夏のコンピュータ学習会 ルビを振る ルビの欄に打ち込む

33 夏のコンピュータ学習会 ルビを確認する ブラウザ（ホームページを見る画面）で確認する

34 夏のコンピュータ学習会 アニメーション文字の挿入 アニメーション文字（動く）を挿入する

35 夏のコンピュータ学習会 アニメーション文字の挿入 カスタムでＯＫ

36 夏のコンピュータ学習会 アニメーション文字の挿入 動き方を選択し、文字を打ち込む

37 夏のコンピュータ学習会 アニメーション文字の挿入 画面上に入ったところ

38 夏のコンピュータ学習会 ブラウザー確認 ブラウザで確認

39 夏のコンピュータ学習会 ロゴ（飾り文字）の挿入 ロゴ（飾り文字）の挿入

40 夏のコンピュータ学習会 ロゴ（飾り文字）の挿入 ロゴが挿入された

41 夏のコンピュータ学習会 ボタンの挿入 ロゴの形を変更する

42 夏のコンピュータ学習会 吹き出し文字の挿入 いろいろな形がある

43 夏のコンピュータ学習会 ボタンの挿入 一つを選択

44 夏のコンピュータ学習会 行事予定のページ作成 行事予定を作成 「新規作成」で新しいページを作る

45 夏のコンピュータ学習会 ページの保存 ファイル名を変更し保存する 「新しいフォルダ」

46 夏のコンピュータ学習会 リンクの挿入 行事予定にリンクさせる

47 夏のコンピュータ学習会 リンクの挿入 行事予定.htmlを選択する

48 夏のコンピュータ学習会 ＰＤＦにする エクセルファイルをＰＤＦ化する

49 夏のコンピュータ学習会 ＰＤＦにする エクセルファイルを名前を付けて保存

50 夏のコンピュータ学習会 ＰＤＦにする 「ファイルの種類」保存方法ｈを変更する

51 夏のコンピュータ学習会 ＰＤＦにする ＰＤＦを選択する

52 夏のコンピュータ学習会 ＰＤＦにする 同じ場所に保存する

53 夏のコンピュータ学習会 ＰＤＦにする ＰＤＦ化された

54 夏のコンピュータ学習会 リンクの挿入 行事ページからＰＤＦにリンクをはる

55 夏のコンピュータ学習会 リンクの挿入 ＰＤＦファイルを選択

56 夏のコンピュータ学習会 プレビューで確認 プレビューで確認

57 夏のコンピュータ学習会 ロールオーバー機能 画像の上で右クリック 画像のロールオーバー効果の挿入

58 夏のコンピュータ学習会 ロールオーバー機能 画像の上にポインタをおくと変化する

59 夏のコンピュータ学習会 ロールオーバー機能 効果の確認

60 夏のコンピュータ学習会 ロールオーバー機能 効果の選択

61 夏のコンピュータ学習会 ロールオーバー機能 選んだら次へ

62 夏のコンピュータ学習会 ロールオーバー機能 他の画像にかえてみる

63 夏のコンピュータ学習会 ロールオーバー機能 完了

64 夏のコンピュータ学習会 ロールオーバー機能 画像の左上をチェック

65 夏のコンピュータ学習会 ブラウザーで確認

66 夏のコンピュータ学習会 音楽を鳴らす ＢＧＭをつける 挿入→ＢＧＭ→素材集から

67 夏のコンピュータ学習会 音楽を鳴らす サウンドファイルの中から選択

68 夏のコンピュータ学習会 音楽を鳴らす ＢＧＭが入ったことを確認

69 注：同じフォルダ内ではどんどん増える一方で、ファイルの判別が困難になる。
夏のコンピュータ学習会 保存する際の注意点 ・画像等の保存先 注：同じフォルダ内ではどんどん増える一方で、ファイルの判別が困難になる。 ・年度ごとにフォルダを作り、その中にまとめればよい 上書き保存の注意