3年技術授業用のテストページ

⇒ 清川中のPRへ  ⇒ ふるさと学習チームへ  ⇒ 学校行事チームへ  ⇒ 日常活動チームへ
★ コンテンツプログラミングシステム_prprの紹介  ビジュアルHTMLエディタ_preditor
← メイキング動画 … 右端の □ をクリックすると最大化

■ ディジタル作品「清川中のPR」の作り方

  1. チーム内での分担を確認し、絵コンテを仕上げる。
  2. コンテンツプログラミングシステム_prprの紹介を見て、作り方を理解する
  3. public_htmlフォルダの中の pr41.html(41の部分は自分の出席番号)をダブルクリックしてGoogleChromeで表示。。
  4. meryを起動し、ファイル(F)-開く(O)で pr41.html を開く。
  5. preditorを開く。
  6. 絵コンテに従い、preditorで見出しや文章を打つ。画像の挿入の注意点(1~4)に従い、写真選び・コピー・縮小をし、画像を挿入する。「時短ワザ」を使って、すばやく1枚のスライドを仕上げる。
  7. preditorで編集後、右上のコードビューボタンを押して「ソースコード表示」にし、全て選択(CTRL+A)・コピー(CTRL+C)して、meryで pr41.html の<section>タグ内に貼りつけ(CTRL+V)る。
  8. Meryで、CTRL+SHIFT+Sでスニペットを挿入する。リンクは、最低「前へ」「次へ」を挿入する。必要に応じて、アニメーションを作成・挿入する。
  9. Meryで編集後、ファイル(F)-上書き保存(S) で上書き保存する。pr41.htmlのChromeでF5キーを押して、表示を更新する。
  10. 新たにスライドを追加するには、meryでスニペット「スライド-空スライド挿入」をする。今編集しているpreditorの上部の突起(タブ)を 右クリックタブを複製 するか、新たに preditor をクリックして開くかして編集する。あとは、6.~9.を繰り返して個人の分担を完成させる。
     preditor-Chrome(編集) → pr41.html-Mery(保存) → pr41.html-Chrome(表示) → 
    つまり、preditorで編集したものをMeryに貼りつけて保存し、Chromeで正しく表示されているか確認する作業を繰り返せばよい。
  11. 最後に、チームごとにリンクさせる。

■ HTMLファイルについて【 ハンドブックp101より 】

■ 画像ファイルについて【 教科書p206~207より 】

■ 情報モラルについて【 教科書p198~201・212より 】

      簡単アニメエディタ

■ 以前のテストページ

kuchi0.html…svgをHTMLに埋め込んでいる。
kuchi1p.html…Pablo.jsとsvgを相対URLで読み込んでいる。
kuchi2cdn.html…Pablo.jsとsvgを絶対URLでFirebaseから読み込んでいる。
kuchi2img.html…imgタグで配置したsvgから絶対URLを得て読み込んでいる。
kuchi3fb_RL…HTMLファイルを作らず、RunstantLiteに書いて実行。