andy 3 年之前
父節點
當前提交
468a033d49
共有 5 個文件被更改,包括 148 次插入163 次删除
  1. 二進制
      .DS_Store
  2. 21 0
      README.md
  3. 二進制
      img/1640340474676.jpg
  4. 二進制
      img/Screen Shot 2021-12-24 at 6.10.08 PM.png
  5. 127 163
      index.html

二進制
.DS_Store


+ 21 - 0
README.md

@@ -0,0 +1,21 @@
+# 報告更改流程
+
+## 打開html後 
+
+![image](img/1640340474676.jpg)
+
+
+## 上圖中分別對應報告的頁數
+
+## 點選想要編輯的頁數 並找到 class='Analytics-chart'
+
+## 展開後就可以找到對應的內容進行文字編輯
+
+## 大標題是(有背景顏色的標題) <h2 class='Data-h2 fw-bold mt-1'>關於微電影</h2>
+
+## 粗體小標題是 <h4 class='fw-bold'>觀眾喜好的影音類型</h4>
+
+## 段落文字與表格則可以直接在<p>、<table>中編輯
+
+## 圖表的js在最下方
+

二進制
img/1640340474676.jpg


二進制
img/Screen Shot 2021-12-24 at 6.10.08 PM.png


+ 127 - 163
index.html

@@ -27,6 +27,7 @@
 <body>
 
   <section class='Analytics-report'>
+    <!-- 封面 -->
     <div id="report-cover" class='Analytics-report-page'>
       <div class='text-end mb-3'>
         <img class='choozmo-cover mt-5 me-3' src="./img/logo_choozmo.webp" alt="">
@@ -34,7 +35,7 @@
       <div class='container-fluid px-0 mx-0'>
         <div style="z-index: 100;" class="card text-white border-0">
           <img src="./img/PC.jpeg" class="card-img" alt="...">
-          <div  class="card-img-overlay">
+          <div class="card-img-overlay">
             <div class="cover-title">
               <h1 class="card-title mb-0">集仕多</h1>
               <h1 class="card-title">數據資訊量表</h1>
@@ -45,7 +46,6 @@
         <div class="card text-dark border-0">
           <div class="row px-0 mx-0">
             <div class="col-4">
-
             </div>
             <div class="col-8">
               <img style="margin-top: -30px;" src="./img/圖層 2.png" class="img-fluid card-img" alt="...">
@@ -55,12 +55,12 @@
             <div class="cover-text">
               <h1 class="card-title">微電影網路聲量調查報告</h1>
               <p class="card-text">分析微電影在Facebook、Youtube等平台上的互動:觀察及分析微電影該產業類型在Facebook、Youtube等社群媒體上受到的討論、關注及互動的程度。</p>
+              <!-- 分隔線 -->
               <hr>
               <h1 class="card-title">工研院行銷傳播處</h1>
-
               <div class="copyrighted">
                 <div class="row px-0 mx-0">
-                  <div  class="choozmo-copyrighted col-12 order-2 col-sm-6 order-1 col-md-6 order-md-1 px-0">
+                  <div class="choozmo-copyrighted col-12 order-2 col-sm-6 order-1 col-md-6 order-md-1 px-0">
                     <p>集仕多股份有限公司 &copy;版權所有</p>
                   </div>
                   <div class="col-12 order-1 col-sm-6 col-md-6 order-sm-2 order-md-2 px-0">
@@ -73,7 +73,6 @@
         </div>
       </div>
     </div>
-
     <!-- 第一頁 -->
     <div class='Analytics-report-page'>
       <img style="position: absolute;" class='Orange2' src="./img/背景橘.png" alt="">
@@ -86,8 +85,12 @@
           <div class="row mx-0">
             <div class="col-12">
               <h2 class='Data-h2 fw-bold mt-1'>關於微電影</h2>
-              <p class="my-3">隨著媒體技術的發展,微電影是近年來極為盛行的一種行銷作品,不同於傳統電影,微電影主要以時長較短且敘事有盡,情意無窮的完整劇情來呈現,對民眾來説是受歡迎且具有吸引力的,尤其是新時代的速食收看習慣,民眾或許更喜歡通過微電影,快速得到想要的資訊,還可以從中得到深刻的啓發和省思。微電影可分成各種形式,例如:公益推廣、敘事音樂MV、個人創意、商業廣告等。</p>
-              <p class="mb-3">當數位内容開始走進智慧型手機裝置,依微電影精簡的長度,加上無線寬頻和5G技術的進步,微電影可以説是新時代民眾最合適的娛樂管道。大多數的微電影都選擇在社群平台上播出,藉由網路的快速傳播,使得微電影在網路上的曝光率逐漸增加。同時,社群平台也具備了按讚、轉發功能,並有反覆觀看等特徵,跟新時代的民眾所使用的社群平台有著關聯性,加上微電影故事性強,能在短時間内引起共鳴,為此加深了民眾對微電影的印象、關注和分享,更是創造了話題性和新聞價值。</p>
+              <p  class="my-3">
+                隨著媒體技術的發展,微電影是近年來極為盛行的一種行銷作品,不同於傳統電影,微電影主要以時長較短且敘事有盡,情意無窮的完整劇情來呈現,對民眾來説是受歡迎且具有吸引力的,尤其是新時代的速食收看習慣,民眾或許更喜歡通過微電影,快速得到想要的資訊,還可以從中得到深刻的啓發和省思。微電影可分成各種形式,例如:公益推廣、敘事音樂MV、個人創意、商業廣告等。
+              </p>
+              <p class="mb-3">
+                當數位内容開始走進智慧型手機裝置,依微電影精簡的長度,加上無線寬頻和5G技術的進步,微電影可以説是新時代民眾最合適的娛樂管道。大多數的微電影都選擇在社群平台上播出,藉由網路的快速傳播,使得微電影在網路上的曝光率逐漸增加。同時,社群平台也具備了按讚、轉發功能,並有反覆觀看等特徵,跟新時代的民眾所使用的社群平台有著關聯性,加上微電影故事性強,能在短時間内引起共鳴,為此加深了民眾對微電影的印象、關注和分享,更是創造了話題性和新聞價值。
+              </p>
             </div>
             <div class="col-12">
               <h2 class='Data-h2 fw-bold mt-1'>微電影與其他的影像形式比較分析</h2>
@@ -178,11 +181,13 @@
               </table>
               <p class="text-center">表(1)</p>
               <div>
-                <p class="mb-3">工研院之微電影透過具有張力的劇情來傳達產品服的用途及核心價值,將其信念明確的表達出來,相比於一般的新聞專題影片的單向播報新聞資訊,較難引起觀眾的共鳴及留下印象。而相較於網紅活動推廣或是品牌影片較為簡短的情境示意,工研院之微電影的故事主軸較為明顯。</p>
+                <p class="mb-3">
+                  工研院之微電影透過具有張力的劇情來傳達產品服的用途及核心價值,將其信念明確的表達出來,相比於一般的新聞專題影片的單向播報新聞資訊,較難引起觀眾的共鳴及留下印象。而相較於網紅活動推廣或是品牌影片較為簡短的情境示意,工研院之微電影的故事主軸較為明顯。
+                </p>
                 <p class="mb-3">除此之外,基於工研院微電影之偏技術面之特性,對於多數觀眾可能無法一時之間完全理解,故它所引起的話題討論度相比於網紅的品牌宣傳影片較低。</p>
               </div>
             </div>
-          
+
           </div>
         </div>
 
@@ -191,6 +196,7 @@
         <p>1</p>
       </div>
     </div>
+    <!-- 第二頁 -->
     <div class='Analytics-report-page'>
       <img style="position: absolute;" class='Orange2' src="./img/背景橘.png" alt="">
       <img style="position: absolute;" class='Purple2' src="./img/背景紫.png" alt="">
@@ -214,7 +220,6 @@
               <h2 class='Data-h2 fw-bold'>微電影廣告吸引力面向</h2>
               <div class='mb-3'>
                 <div class="my-3">
-                  <!-- <h4 class='fw-bold mt-3'>微電影吸引力面向</h4> -->
                   <p>不同的微電影題材間接影響了觀眾的觀看行為和留下深刻的印象,大致可分為:</p>
                   <ul>
                     <li style="list-style-type: disc">
@@ -230,7 +235,7 @@
                   <p>不到30%的人則會受到微電影的製作精良場面浩大以及體驗度高而被吸引。</p>
                 </div>
                 <canvas id="myChart" width="200" height="200"></canvas>
-              <p class="text-center">圖(2)</p>
+                <p class="text-center">圖(2)</p>
               </div>
             </div>
           </div>
@@ -312,55 +317,6 @@
               </div>
             </div>
           </div>
-          <!-- <div class='row px-0 mx-0'>
-            <div class="col-6">
-              <h2 class='Data-h2 fw-bold'>台灣微電影發展模式之建構</h2>
-              <table class="table-1 table table-bordered">
-                <thead>
-                  <tr>
-                    <th scope="col"></th>
-                    <th scope="col">廣告</th>
-                    <th scope="col">微電影</th>
-                    <th scope="col">電影</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <th scope="row">時間</th>
-                    <td>10分-60分</td>
-                    <td>1分-30分</td>
-                    <td>90分-120分</td>
-                  </tr>
-                  <tr>
-                    <th scope="row">平台</th>
-                    <td>主要為電視,延伸至網路</td>
-                    <td>主要為網路,延伸至電視或電影院</td>
-                    <td>主要為電影院延伸至電視以及網路</td>
-                  </tr>
-                  <tr>
-                    <th scope="row">內容</th>
-                    <td>以傳達產品與品牌為主</td>
-                    <td>透過劇情來傳達品牌認同度</td>
-                    <td>著重故事情節,無明顯商業宣傳</td>
-                  </tr>
-                  <tr>
-                    <th scope="row">喜好程度</th>
-                    <td>低</td>
-                    <td>中</td>
-                    <td>高</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-            <div class="col-6">
-              <div class="mt-3">
-                <h4 class='fw-bold'>微電影發展模式之建構</h4>
-                <p>微電影介於廣告與電影之間,運用吸引人的劇情內容,巧妙地將品牌精神與產品行銷,融入故事情節當中,再透過劇情傳達訴求,提升品牌認同與產品的好感度,進而產生消費行為。</p>
-                <p>微電影兼具兩者的廣告效益和娛樂效果,更別説是新時代的速食收看習慣,觀眾或許更喜歡通過微電影,快速得到想要的資訊。
-                </p>
-              </div>
-            </div>
-          </div> -->
         </div>
 
       </div>
@@ -368,7 +324,7 @@
         <p>2</p>
       </div>
     </div>
-    <!-- 第頁 -->
+    <!-- 第頁 -->
     <div class='Analytics-report-page'>
       <img style="position: absolute;" class='Orange2' src="./img/背景橘.png" alt="">
       <img style="position: absolute;" class='Purple2' src="./img/背景紫.png" alt="">
@@ -397,7 +353,7 @@
                   <canvas id="myChart-Doughnut4" width="200" height="200"></canvas>
                   <p>政府公益</p>
                 </div>
-                 <p class="text-center">圖(3)</p>
+                <p class="text-center">圖(3)</p>
                 <h2 class='Data-h2 fw-bold mt-3'>廣告時長與故事類型</h2>
 
                 <div class='border mb-2 pb-3 px-0'>
@@ -498,7 +454,8 @@
               <div class="mt-3">
                 <div>
                   <h4 class='fw-bold'>各微電影類別與素人之關係</h4>
-                  <p class="mb-3">除此之外,從圖(3)中可以發現,在品牌形象類型的微電影中,雖然業主選擇明星來當主演的概率為最大,但是,業主選擇素人當主演的比例大幅高於產品廣告類型的微電影中素人當主演的比例。
+                  <p class="mb-3">
+                    除此之外,從圖(3)中可以發現,在品牌形象類型的微電影中,雖然業主選擇明星來當主演的概率為最大,但是,業主選擇素人當主演的比例大幅高於產品廣告類型的微電影中素人當主演的比例。
                   </p>
                   <p class="mb-3">由此可以推論出,可能是業主希望自身品牌形象的微電影能夠離觀眾距離更近一點,縮短品牌與觀眾的距離。</p>
                 </div>
@@ -520,113 +477,114 @@
         <p>3</p>
       </div>
     </div>
-        <!-- 第三頁 -->
-        <div class='Analytics-report-page'>
-          <img style="position: absolute;" class='Orange2' src="./img/背景橘.png" alt="">
-          <img style="position: absolute;" class='Purple2' src="./img/背景紫.png" alt="">
-          <div class='text-end mb-3'>
-            <img class='choozmo mt-2 me-3' src="./img/logo_choozmo.webp" alt="">
-          </div>
-          <div class='Analytics-chart'>
-            <div class="row mx-0 px-0">
-              <div class="row mx-0">
-                <h2 class='Data-h2 fw-bold mt-1'>微電影與其他的影像形式比較分析(YT)</h2>
-                <div class="col-12 col-sm-7 col-md-7 mb-3">
-                  <canvas class="mt-3" id="myChart-bar-yt" width="200" height="200"></canvas>
-                <p class="text-center mt-2">圖(6)</p>
-                </div>
-                <div class="col-12 col-sm-5 col-md-5">
-                  <div class="mt-3">
-                    <p class="mb-3">綜觀而言,《愛是最短的距離---織足藏樂館》有最高的觀看次數、讚數以及留言數,由於該影片的上傳時間相較於其他影片早,所以因此累積較多的觀看次數。</p>
-                    <p>除此之外工研院《愛是最短的距離---織足藏樂館》
-                      完整版與其他電視台有合作,因此傳播的效果較佳。與其同一時期的另一部《來日》,由於在臉書上的貼文連結已經失效,且其貼文內容並沒有放入影片,容易被使用者忽略,因此該部影片的觀看次數並不高。</p>
-                  </div>
-                </div>
-                <div class="col-12">
-                  <p>
-                    另外,近期的兩部:《我的黑手阿爸》、《那些足球教我的事》,兩部皆有超過萬次觀看,主要由於在臉書當中兩篇影片的貼文都有不低的觀看數及分享次數,其中《那些足球教我的事》聲量較高,可以從臉書中觀察得知該部微電影的貼文分享次數較高,因此,該影片的傳播的效果較佳。
-                  </p>
-                </div>
-              </div>
+    <!-- 第四頁 -->
+    <div class='Analytics-report-page'>
+      <img style="position: absolute;" class='Orange2' src="./img/背景橘.png" alt="">
+      <img style="position: absolute;" class='Purple2' src="./img/背景紫.png" alt="">
+      <div class='text-end mb-3'>
+        <img class='choozmo mt-2 me-3' src="./img/logo_choozmo.webp" alt="">
+      </div>
+      <div class='Analytics-chart'>
+        <div class="row mx-0 px-0">
+          <div class="row mx-0">
+            <h2 class='Data-h2 fw-bold mt-1'>微電影與其他的影像形式比較分析(YT)</h2>
+            <div class="col-12 col-sm-7 col-md-7 mb-3">
+              <canvas class="mt-3" id="myChart-bar-yt" width="200" height="200"></canvas>
+              <p class="text-center mt-2">圖(6)</p>
             </div>
-            <div class="row px-0 mx-0 mt-5">
-              <div class="row mx-0">
-                <h2 class='Data-h2 fw-bold'>微電影與其他的影像形式比較分析(FB)</h2>
-                <div class="col-12 col-sm-7 col-md-7">
-                  <canvas class="mt-3" id="myChart-bar" width="200" height="200"></canvas>
-                <p class="text-center mt-2">圖(7)</p>
-                </div>
-                <div class="col-12 col-sm-5 col-md-5">
-                  <div class="mt-3">
-                    <p class="mb-3">
-                      綜觀而言,黑手阿爸與那些足球教我的事兩部影片於臉書的反應較為熱烈,主要是由於該兩則貼文皆有融合留言抽獎活動,因此,貼文的按讚數、觀看次數及留言數,皆有明顯的高聲量表現。
-                    </p>
-                    <p>除此之外,貼文的標題以及開頭文字也是一大因素,從經濟部的GreenCampus
-                      綠光篇貼文與其他貼文比較起來,由於其他的貼文標題及開頭皆是採用較為口語的文字敘述,像是與觀眾對話,較能夠吸引使用者繼續閱讀及觀看,因此在觀看數與按讚數都較高。</p>
-                  </div>
-                </div>
+            <div class="col-12 col-sm-5 col-md-5">
+              <div class="mt-3">
+                <p class="mb-3">綜觀而言,《愛是最短的距離---織足藏樂館》有最高的觀看次數、讚數以及留言數,由於該影片的上傳時間相較於其他影片早,所以因此累積較多的觀看次數。</p>
+                <p>除此之外工研院《愛是最短的距離---織足藏樂館》
+                  完整版與其他電視台有合作,因此傳播的效果較佳。與其同一時期的另一部《來日》,由於在臉書上的貼文連結已經失效,且其貼文內容並沒有放入影片,容易被使用者忽略,因此該部影片的觀看次數並不高。</p>
               </div>
             </div>
+            <div class="col-12">
+              <p>
+                另外,近期的兩部:《我的黑手阿爸》、《那些足球教我的事》,兩部皆有超過萬次觀看,主要由於在臉書當中兩篇影片的貼文都有不低的觀看數及分享次數,其中《那些足球教我的事》聲量較高,可以從臉書中觀察得知該部微電影的貼文分享次數較高,因此,該影片的傳播的效果較佳。
+              </p>
+            </div>
           </div>
-          <div class='pagenumber'>
-            <p>4</p>
+        </div>
+        <div class="row px-0 mx-0 mt-5">
+          <div class="row mx-0">
+            <h2 class='Data-h2 fw-bold'>微電影與其他的影像形式比較分析(FB)</h2>
+            <div class="col-12 col-sm-7 col-md-7">
+              <canvas class="mt-3" id="myChart-bar" width="200" height="200"></canvas>
+              <p class="text-center mt-2">圖(7)</p>
+            </div>
+            <div class="col-12 col-sm-5 col-md-5">
+              <div class="mt-3">
+                <p class="mb-3">
+                  綜觀而言,《我的黑手阿爸》與《那些足球教我的事》兩部影片於臉書的反應較為熱烈,主要是由於該兩則貼文皆有融合留言抽獎活動,因此,貼文的按讚數、觀看次數及留言數,皆有明顯的高聲量表現。
+                </p>
+                <p>除此之外,貼文的標題以及開頭文字也是一大因素,從經濟部的《GreenCampus
+                  綠光篇》貼文與其他貼文比較起來,由於其他的貼文標題及開頭皆是採用較為口語的文字敘述,像是與觀眾對話,較能夠吸引使用者繼續閱讀及觀看,因此在觀看數與按讚數都較高。</p>
+              </div>
+            </div>
           </div>
         </div>
-    <!-- 第四頁 -->
-   <!-- 第三頁 -->
-   <div class='Analytics-report-page'>
-    <img style="position: absolute;" class='Orange2' src="./img/背景橘.png" alt="">
-    <img style="position: absolute;" class='Purple2' src="./img/背景紫.png" alt="">
-    <div class='text-end mb-3'>
-      <img class='choozmo mt-2 me-3' src="./img/logo_choozmo.webp" alt="">
+      </div>
+      <div class='pagenumber'>
+        <p>4</p>
+      </div>
     </div>
-    <div class='Analytics-chart'>
-      <div class="row mx-0 px-0">
-        <div class="row mx-0">
-          <div class="col-12 col-sm-6 col-md-6">
-            <h2 class='Data-h2 fw-bold'>科專成果之微電影映後聲量調查與分析(YT)</h2>
-            <canvas class="mt-3" id="bar-yt" width="200" height="200"></canvas>
-            <p class="text-center mt-2">圖(8)</p>
-          </div>
-          <div class="col-12 col-sm-6  col-md-6">
-            <h2 class='Data-h2 fw-bold'>科專成果之微電影映後聲量調查與分析(FB)</h2>
-            <canvas class="mt-3" id="bar-fb" width="200" height="200"></canvas>
-            <p class="text-center mt-2">圖(9)</p>
+    <!-- 第五頁 -->
+    <div class='Analytics-report-page'>
+      <img style="position: absolute;" class='Orange2' src="./img/背景橘.png" alt="">
+      <img style="position: absolute;" class='Purple2' src="./img/背景紫.png" alt="">
+      <div class='text-end mb-3'>
+        <img class='choozmo mt-2 me-3' src="./img/logo_choozmo.webp" alt="">
+      </div>
+      <div class='Analytics-chart'>
+        <div class="row mx-0 px-0">
+          <div class="row mx-0">
+            <div class="col-12 col-sm-6 col-md-6">
+              <h2 class='Data-h2 fw-bold'>科專成果之微電影映後聲量調查與分析(YT)</h2>
+              <canvas class="mt-3" id="bar-yt" width="200" height="200"></canvas>
+              <p class="text-center mt-2">圖(8)</p>
+            </div>
+            <div class="col-12 col-sm-6  col-md-6">
+              <h2 class='Data-h2 fw-bold'>科專成果之微電影映後聲量調查與分析(FB)</h2>
+              <canvas class="mt-3" id="bar-fb" width="200" height="200"></canvas>
+              <p class="text-center mt-2">圖(9)</p>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="row px-0 mx-0 mt-2">
-        <div class="row mx-0">
-          <div class="col-12">
-            <div class="mb-3">
-              <h4 class='fw-bold'>那些足球教我的事</h4>
-              <p>5G是最新一代行動通訊技術,為4G系統的延伸。其效能目標是高資料速率、減少延遲、節省能源、降低成本、提高系統容量和大規模裝置連接,實現更好的網路體驗。加上熱門討論的邊緣運算MEC (Multi-access Edge Computing) 更可以改善現行 4G 終端對雲端的長路徑。
-                而該部電影主軸内容由經濟部攜手台灣多個國際大廠,結合產官學量能,全面啟動累積的深厚產業基底,拼搏台灣5G產業,較為貼近目前的生活形式,因此觸及率較高,如圖(9)在臉書的留言也會比《我的黑手阿爸》來得高。
+        <div class="row px-0 mx-0 mt-2">
+          <div class="row mx-0">
+            <div class="col-12">
+              <div class="mb-3">
+                <h4 class='fw-bold'>那些足球教我的事</h4>
+                <p>5G是最新一代行動通訊技術,為4G系統的延伸。其效能目標是高資料速率、減少延遲、節省能源、降低成本、提高系統容量和大規模裝置連接,實現更好的網路體驗。加上熱門討論的邊緣運算MEC
+                  (Multi-access Edge Computing) 更可以改善現行 4G 終端對雲端的長路徑。
+                  而該部電影主軸内容由經濟部攜手台灣多個國際大廠,結合產官學量能,全面啟動累積的深厚產業基底,拼搏台灣5G產業,較為貼近目前的生活形式,因此觸及率較高,如圖(9)在臉書的留言也會比《我的黑手阿爸》來得高。
                 </p>
-            </div>
-            <div class="mb-3">
-              <h4 class='fw-bold'>我的黑手阿爸</h4>
-              <p>該部微電影主軸為由經濟部技術處與工研院攜手研發打造出的智慧機械雲,協助產業轉型,解決數位升級的困境,由於該服務主要的目標對象為廠商,對於一般民眾而言距離較遠,較無法產生共鳴,因此,如圖(9)在臉書中留言數稍比那些足球教我的事少一些。
-                然而,細看留言的內容可以發現,該部微電影的留言內容有提及服務而不單是抽獎的回覆,有觀眾詢問申請事宜,想要有進一步的了解,以微電影的服務宣傳目的而言,有實質的效果。
-                承如上面所述,由於目標對象為廠商,廠商有較為強烈的動機暸解及關注該種專頁服務技術,因此,在留言回應的部分,廠商會反應出需求或者是依據過往相關經驗予以評論。
+              </div>
+              <div class="mb-3">
+                <h4 class='fw-bold'>我的黑手阿爸</h4>
+                <p>
+                  該部微電影主軸為由經濟部技術處與工研院攜手研發打造出的智慧機械雲,協助產業轉型,解決數位升級的困境,由於該服務主要的目標對象為廠商,對於一般民眾而言距離較遠,較無法產生共鳴,因此,如圖(9)在臉書中留言數稍比那些足球教我的事少一些。
+                  然而,細看留言的內容可以發現,該部微電影的留言內容有提及服務而不單是抽獎的回覆,有觀眾詢問申請事宜,想要有進一步的了解,以微電影的服務宣傳目的而言,有實質的效果。
+                  承如上面所述,由於目標對象為廠商,廠商有較為強烈的動機暸解及關注該種專頁服務技術,因此,在留言回應的部分,廠商會反應出需求或者是依據過往相關經驗予以評論。
                 </p>
-            </div>
-            <div class="mb-3">
-              <h4 class='fw-bold'>總結</h4>
-              <p>如圖(8)在YouTube的成效,《那些足球教我的事》觀看數比《我的黑手阿爸》來得高,推測因為《那些足球教我的事》受眾為一般民眾,較為貼近現在的生活形式和有共鳴,因此觀看數自然會高。而《我的黑手阿爸》目標或許是鎖定在廠商服務,受眾數量較少,因此觀看次數較低。
-                但《我的黑手阿爸》按贊數及留言數會比《那些足球教我的事》來得多,也許是因為廠商具備該服務的需求及具有一定的相關經驗與知識背景,因此,與該種技術服務內容的影片所產生的連結力相當的強。
+              </div>
+              <div class="mb-3">
+                <h4 class='fw-bold'>總結</h4>
+                <p>
+                  如圖(8)在YouTube的成效,《那些足球教我的事》觀看數比《我的黑手阿爸》來得高,推測因為《那些足球教我的事》受眾為一般民眾,較為貼近現在的生活形式和有共鳴,因此觀看數自然會高。而《我的黑手阿爸》目標或許是鎖定在廠商服務,受眾數量較少,因此觀看次數較低。
+                  但《我的黑手阿爸》按贊數及留言數會比《那些足球教我的事》來得多,也許是因為廠商具備該服務的需求及具有一定的相關經驗與知識背景,因此,與該種技術服務內容的影片所產生的連結力相當的強。
                 </p>
 
+              </div>
             </div>
           </div>
         </div>
       </div>
+      <div class='pagenumber'>
+        <p>5</p>
+      </div>
     </div>
-    <div class='pagenumber'>
-      <p>5</p>
-    </div>
-  </div>
-
   </section>
 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js"
@@ -643,8 +601,9 @@
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
   <script src="https://kit.fontawesome.com/0b8ff4e055.js" crossorigin="anonymous"></script>
   <script>
+    // 圖表
+    // 觀眾較常收看之影音類型
     var ctx = document.getElementById('myChart');
-    // var ctx = document.getElementById('myChart');
     var myChart = new Chart(ctx, {
       type: 'bar', //圖表類型
       data: {
@@ -716,6 +675,7 @@
       }
     });
 
+    // 微電影吸引力面向
     var ctx2 = document.getElementById('myChart2');
     var myChart2 = new Chart(ctx2, {
       type: 'bar', //圖表類型
@@ -782,12 +742,8 @@
         }
       }
     });
-
-
-  </script>
-  <script>
-
-
+    
+    //微電影主演是否為明星佔比 
     var ctx3 = document.getElementById('myChart-pie');
     var myChart2 = new Chart(ctx3, {
       type: 'pie', //圖表類型
@@ -828,6 +784,7 @@
       },
 
     });
+    
     // Doughnut1-產品廣告
     var ctx4 = document.getElementById('myChart-Doughnut1').getContext('2d');
     var myChart3 = new Chart(ctx4, {
@@ -878,6 +835,7 @@
       },
 
     });
+    
     // Doughnut2-品牌形象廣告
     var ctx5 = document.getElementById('myChart-Doughnut2').getContext('2d');
     var myChart4 = new Chart(ctx5, {
@@ -928,6 +886,7 @@
       },
 
     });
+    
     // Doughnut3-觀念廣告
     var ctx6 = document.getElementById('myChart-Doughnut3').getContext('2d');
     var myChart5 = new Chart(ctx6, {
@@ -978,6 +937,7 @@
       },
 
     });
+    
     // Doughnut4-公益廣告
     var ctx7 = document.getElementById('myChart-Doughnut4').getContext('2d');
     var myChart6 = new Chart(ctx7, {
@@ -1028,13 +988,14 @@
       },
 
     });
-
+    
+    // 微電影與其他的影像形式比較分析YT
     var ctx8 = document.getElementById('myChart-bar');
     var myChart7 = new Chart(ctx8, {
       type: 'bar', //圖表類型
       data: {
         //標題
-        labels: ['黑手阿爸', ['微電影', '激「立」預告片'], '那些足球教我的事', ['愛是最短的距離', '---織足藏樂館'], ['GreenCampus ', '綠光篇1'], ['GreenCampus ', '綠光篇2']],
+        labels: ['我的黑手阿爸', ['微電影', '激「立」預告片'], '那些足球教我的事', ['愛是最短的距離', '---織足藏樂館'], ['GreenCampus ', '綠光篇1'], ['GreenCampus ', '綠光篇2']],
         datasets: [
           {
             label: 'like',
@@ -1099,13 +1060,14 @@
         }
       }
     });
-
+    
+    // 微電影與其他的影像形式比較分析FB
     var ctx9 = document.getElementById('myChart-bar-yt');
     var myChart8 = new Chart(ctx9, {
       type: 'bar', //圖表類型
       data: {
         //標題
-        labels: ['黑手阿爸', ['微電影', '激「立」預告片'], '那些足球教我的事', ['愛是最短的距離', '---織足藏樂館'], '來日'],
+        labels: ['我的黑手阿爸', ['微電影', '激「立」預告片'], '那些足球教我的事', ['愛是最短的距離', '---織足藏樂館'], '來日'],
         datasets: [
           {
             label: 'like',
@@ -1170,6 +1132,7 @@
         }
       }
     });
+    // 科專成果之微電影映後聲量調查與分析(YT)
     var ctx10 = document.getElementById('bar-yt');
     var myChart10 = new Chart(ctx10, {
       type: 'bar', //圖表類型
@@ -1241,6 +1204,7 @@
       }
     });
 
+    // 科專成果之微電影映後聲量調查與分析(FB)
     var ctx11 = document.getElementById('bar-fb');
     var myChart9 = new Chart(ctx11, {
       type: 'bar', //圖表類型