1 of 27

北科大 陳擎文

網站設計與javascript

​

及其在電子商務、數位行銷的應用

2 of 27

課程目標介紹

3 of 27

課程目標1

  • 同學們將可以學習到『架站、網站設計』基本技術，
  • 並將之應用到電子商務的數位行銷，
  • 不但可以讓網站可以被Google引擎搜尋到，
  • 並使用SEO技術把網站排在第一頁，增加網站流量。
  • 並且學習如何使用javascript來偵測到客戶在電商網站上的各種行為。
  • 導入最新 AI 代理人（AI Agent）工具來輔助網站設計

4 of 27

課程範例

  • 1.設計電商網站：郭以樂的鞋子專賣店
  • 讓Google引擎可以找到你的網站
    • 郭以樂的鞋子專賣店
    • 運動休閒鞋、質感皮鞋與各式男女特色鞋
  • 做SEO技術
    • 讓網站排在第一頁

5 of 27

課程範例

  • 使用Google Analytics(GA)技術，
    • 安裝javascript代碼
    • 來追蹤電商網站的客戶流量，客戶行為

6 of 27

課程內容

7 of 27

本課程內容

  • (1).全部都是實作
    • 實作設計電子商務網站
    • 埋設代碼來追蹤客戶行為
    • 網站的流量分析
    • 搜尋引擎行銷（SEO）
    • 導入最新 AI 代理人（AI Agent）工具來輔助網站設計

8 of 27

這門課上課內容

老師的想法是

9 of 27

這門課老師的想法是

  • 先看2個新聞…
  • …
  • …

10 of 27

實作部分

11 of 27

本課程分成二部分

  • (2).實作部分
    • 學習商務網站的前端網站技術（Html+CSS，Javascript）
    • 學習商務網站的後端網站技術（PHP+MySQL）
    • 學習如何使用埋設代碼（JavaScript）來追蹤客戶行為，
    • 應用SEO技巧和響應性網頁設計（RWD）來提升網站在搜尋引擎的排名，
    • 使用Google Analytics（GA)來進行網站的流量分析。

12 of 27

課程大綱

13 of 27

課程大綱概覽

    • 第 01 週：電子商務前後端架構概論與 HTML/CSS 前端開發
    • 第 02 週：JavaScript 基礎（一）：現成代碼套用與網頁模版引進
    • 第 03 週：JavaScript 基礎（二）：網頁標籤與互動程式設計
    • 第 04 週：JavaScript 基礎（三）：對話盒、文字方塊與按鈕控制項
    • 第 05 週：雲端託管實務：商務網站上傳與 Cloud Hosting 部署
    • 第 06 週：AI 代理人協作（一）：使用 Manus 智慧設計與架設電商
    • 第 07 週：AI 代理人協作（二）：使用 Google AntiGravity 自動化架站
    • 第 08 週：網路行銷 SEO：搜尋引擎優化與排名提升核心技巧
    • 第 09 週：期中考試

14 of 27

課程大綱概覽

    • 第 10 週：SEO 實務（一）：網頁 TDK 摘要設定與 Google Search Console (GSC) 索引
    • 第 11 週：SEO 實務（二）：熱門與長尾關鍵字埋設佈局
    • 第 12 週：SEO 實務（三）：圖片屬性控制與圖片 SEO 優化
    • 第 13 週：程式邏輯控制：if-else 與 Switch 條件敘述實作
    • 第 14 週：後端部署實務：網頁空間申請與後端網站雲端上傳
    • 第 15 週：網頁伺服器架設：IIS、Apache+PHP+MySQL 環境配置與 DNS 域名申請
    • 第 16 週：進階網頁設計：Bootstrap 響應式網頁（RWD）開發
    • 第 17 週：全端資料庫整合（一）：PHP + MySQL 動態網頁開發
    • 第 18 週：全端資料庫整合（二）：PHP + MySQL 資料互動實作與期末考試

15 of 27

評分方式

16 of 27

本學期的評分方式

  • 1.上課分數：25%
    • 上課實作範例加分（使用Zuvio來加分）
  • 2.作業分數：15%
  • 3.期中考分數：30%
  • 4.期末作業：30%

17 of 27

教科書，參考書

教材網站

18 of 27

教科書，教材網站

​

​

​

19 of 27

老師相關的業界經驗

20 of 27

業界經驗1：電子商務APP，server端網站設計

  • 業界經驗1：製作：藝術品拍賣網站，幫台灣廠商撰寫Art auction APP
  • ☎結合各種技術，
  • 包括：PHP+smarty、
  • Bootstrap、
  • Jquery mobile、
  • Javascript

21 of 27

業界經驗1：電子商務APP，�server端網站設計

22 of 27

業界經驗2：電子商務APP，�server端網站設計

  • 業界經驗2：手機版的論壇程式（幫香港廠商撰寫）
  • Mobile version of the forum program
  • ☎技術：結合各種技術，包括：PHP+smarty、Bootstrap、Jquery mobile、Javascript

23 of 27

業界經驗3：電子商務APP，�server端網站設計

  • 業界經驗3：製作大陸遠距診療系統 (幫大陸連鎖診所製作)
  • telemedicine system
  • ☎功能1：這是幫中醫診所，所製作的線上診療系統，患者可以偏布大陸各省或海外，都可以登入這個診療系統，成為會員並掛號後，向寶泰堂的醫師求診

​

24 of 27

業界經驗3：電子商務APP，�server端網站設計

25 of 27

業界經驗3：電子商務APP，�server端網站設計

26 of 27

加入Zuvio課程

27 of 27

加入課程Line群組