FC2ブログ

10月31日の授業 

ホームページ作成 
 店舗紹介の画面作成は トップページを複製して作成

           hp9.jpg   
  
 ページの複製
 トップページを開く メニュー「ファイル」から「ページの複製」クリック
 タイトルバーの名前が「newpage.1html]と表示 確認する

 名前を付けて保存
 メニュー「ファイル」から「名前を付けて保存」クリック
 保存する場所ファイル名 「flower」 ファイル名 [info]  にして保存ボタンクリック

 ※ファイル名は半角英数字 
  店舗紹介 infomaitionでinfo   商品一覧 list      画面にあったファイル名をつける


 ページタイトルを変更
 
ナビバーの「ページの属性」クリック  
 「属性」ダイアログが表示 
  ページタイトルボックスに「Flower Shop Sakura¦店舗紹介」入力 OKクリック

  複製するページが下に表れる
       hpA  

   複製した 画面の 画像を Delete 

   「Flower Shop Sakuraは、南青山にある花屋です~」

    の文章を範囲選択をして  Delete








  

見出しを作成 

  ※見出しは検索エンジン最適化
    ツールバー 段落ちの挿入ボックス 見出し1 クリック  
    「店舗紹介」入力

    ※下に空白行を挿入しておく
     店舗紹介の見出し 右クリック スタイルの設定から

     文字を茶色
      hp2
      
      文字の周囲を二重線 
 
      hp3_20181101114248e0e.jpg

 表を挿入
   ナビメニュー 表の挿入

   hp4
   行数 4  列数 2

   空白セルに空白コードを自動挿入するの

   チェックをはずす

   OKする
  
   


 hp6.jpg 表に文字を入力

 セルに文字の入力後 次のセルへは Tab キー

      

    
pc7.jpg    行の追加 

   表のメニューをクリック

   行の追加

   下へ1行追加



 

トップページと店舗紹介の画面が完了  出来上がりまで後一歩です
出来上がりが楽しみになってきました

午後からは

★高大フェスタの説明
★秋の遠足の説明


 
スポンサーサイト



10月24日の授業

10月24日の授業
ブログ写真20181024
ホームページの作成
Section 19 文章を入力する
Section 20 著札権を入力する
Section 21 水平線で内容を区切る
Section 22 文字の斜体/太字にする
Section 23 表の挿入

★オープンキャンパスで多くの見学者が来ました。
★高大フェスタの説明
★秋の遠足の説明
★修学旅行の説明

担当 2班 釼木大治

  

10月17日の授業 

 ホームページの作成(写真挿入・画像切り取り、ボタン作成など)
 テキスト SECTION 15
SECTION 18 までを学びました。
HPBアイコン 

SECTION
15  デジカメで撮った写真(画像)を挿入するには
 画像を挿入する位置でクリックし、
 
写真などの挿入 写真や画像の挿入 をクリック
以下テキストに沿って操作し、下記のように写真(001.jpg)を選択します。
写真をファイルから挿入 
さらに操作をした後、写真の大きさを指定します。
写真の大きさを指定 
上図のように 縦横比を保持して 幅:720(ピクセル)とします。
すると高さは自動的に479 になります。

なぜ、サイズを指定するのでしょうか?
 最近のデジカメやスマホなどで撮る写真の画素数は
幅:1476など大きいものがあり、また、重すぎますので
画面に最適なサイズにしてパフォーマンスを上げることが
重要です。

SECTION 16 
写真を切り抜くには
 
画像を選択し、画像の調整 ➡ 画像の切り取り をクリック
写真の切り取り 最初 

 テキストに沿った操作をし、幅 ボックスに 720 と入力、高さ ボックスに 300 と入力 
写真の切抜き中   
 この場合は、
縦横比は固定しません
また、点線で囲まれた部分をドラッグして使用する部分を決めます。
その後、OKボタンをクリックすると、写真が切り抜かれます。

SECTION 17 写真に文字を入れるには
 写真をクリックし、画像の調整 ➡ 合成画像の編集 をクリックした後
表示されたダイアログで 追加 ➡ ロゴをクリック
そこで表示されたロゴ作成ウィザードで、
日々の生活にお花を...」と入力、文字サイズを12とします。
テキストに沿った操作後、下図のように 合成画像の編集 を行います。
文字入れXY軸 
 X座標に520、Y座標に270 をそれぞれ入力します。OKボタンをクリックしますと
文字が入った 
 写真の右下に文字が入りました。文字を入れるとオリジナリティが増します。

SECTION
18 
リンク用のボタンを作成するには
 
ボタン作成したい位置でクリックした後、
ロゴからボタン 
 上図のように、ロゴの挿入から ボタン をクリックします。

 その後、テキストに沿って操作します。
下図のようにボタン(青い枠)をクリック、
縦横比のチェックをはずし、幅:144 高さ:35 と入力します。

 なぜ、幅を 144 とするのでしょうか?
写真の幅が720で、この写真の下に5つのボタンを作成しますので、
720÷5=144 となります。


ボタンの作成最初
その後は テキストに沿って操作します。

ロゴをクリックし、整列 ➡ 中央揃え をクリックします。
すると、下図のように ホームの文字がボタンの真ん中にきました。
ボタンの作成中ほど 

その後テキストに沿って操作し、
下図のようなボタンができあがります。
ボタンの作成 ラスト 

 効率よく、あと4つのボタンを作成するには
コピー&貼り付け の方法があります。
 上の図で、ボタン(ホーム)をクリックした後、右クリックコピーして
そのあと、次々と貼り付けていきます。すると下図のようになります。
コピー&貼り付け 
 さらに下図のように左から2番目のボタンをクリックした後、
右クリックし、ボタンの編集 を選びます。

ボタンの編集 

 ボタンの作成 のダイアログが表示されますので、文字ボックスに 商品一覧 と入力。
前回の設定 を使って、色、形状などを同じにします。
 ロゴ(商品一覧)の 中央揃え を忘れずに行います。
商品一覧 
すると上の図のように出来上がります。
以下同じ要領で、イベント ブログ 店舗紹介 と作成していきます。

授業風景で、先生による、5つのボタン作成が完了したところです。
授業 ボタンの作成 

■今日は午前・午後とも授業がありました。
 最後の45分は 今日学んだことなどの復習でした。
連絡事項 秋の遠足 11月7日(水) について
 説明などがありました。

今日の一言千里の道も一歩から
                 担当:3班 沖津      

10月3日の授業

10月最初の授業

2週間ぶりのホームページ

〇復習(Flower2のサイトを作成する)
 32ページから39ページ
 42ページから46ページ
 
 *サイトを削除する場合
  2段階の削除をする
   ①ドキュメントのサイトを右クリックし削除をクリック
   ②ビルダーのサイトタブをクリックしサイト一覧/設定をクリックし
    削除をクリック

〇背景に色を付ける
 40ページから41ページ 

  色は自分で決める
  明るい色にする

〇タイトルロゴの作成
 50ページから53ページ

〇午後からの復習
 サイト➡サイトを開く➡復習フラワーを開く
 ➡ビジュアルサイトビューが表示Wクリック
 ➡P38.40.41~45.50~53
     ロゴはオジリナルを作成する

 を勉強しました


 午後から

 CDさんからのお知らせ
 2班の方から忘年会説明
 フェスタの件の報告
 11月遠足の説明
 サイトの復習

10日の授業はお休みです


          授業風景       
授業2 IMG_0785_20181004140436180.jpg


                          担当者 4班 藤原