網頁設計與javascript

臺北科技大學 115-1 學期課程，課號 363130。

課程大綱

本課程是一門專為數位時代設計的跨領域實務導向課程，核心目標在於引導學生從零開始建構具備商業價值的電子商務網站，並掌握現代數位行銷的關鍵技術。課程全面覆蓋「前端網頁設計」、「後端雲端網站架設」與如何把電商網站做數位行銷的「SEO搜尋引擎優化技術」，並前瞻性地導入最新 AI 代理人（AI Agent）工具。 同學們將可以學習到『架站、網站設計』基本技術，並將之應用到電子商務的數位行銷，不但可以讓網站可以被Google引擎搜尋到，並使用SEO技術把網站排在第一頁，增加網站流量。並且學習如何使用javascript來偵測到客戶在電商網站上的各種行為。 在網站開發方面，課程採取循序漸進的全端教學。前端以 HTML、CSS 標籤與樣式語法為基石，結合被史丹 Stanford 大學列為程式入門教材的 JavaScript，由淺入深學習代碼基礎、對話盒、文字方塊與互動按鈕實作，以精準追蹤客戶行為；同時，課程亦涵蓋主流的 Bootstrap 響應式網頁設計（RWD），確保商務網站在各式裝置上的極致體驗。後端則深入探討網頁伺服器架設（IIS、Apache）、資料庫技術（PHP + MySQL）與域名（DNS）申請，讓學生掌握完整的商業網站運行架構。 本課程最大的特色在於尖端科技與商務行銷的完美結合。學生將實作引進新一代 AI 代理人——Manus 與 Google AntiGravity，體驗自動化工作流程，達成智慧化架站與雲端託管部署。在數位行銷與流量變現領域，本課程揚棄純理論教學，強調純實務的操作演練。內容完整涵蓋搜尋引擎優化（SEO）的四大實務：透過網頁 TDK 摘要向搜尋引擎精準自我介紹、操作 Google Search Console（GSC）建立網站索引、佈局「熱門與長尾關鍵字」提升搜尋排名，以及實作圖片 SEO。透過這四種關鍵資訊技術的交織應用，協助學生優化工作流，最終達成極大化電商網站行銷效果的目標。 This course is a practice-oriented, cross-disciplinary offering designed specifically for the digital era. Its core objective is to guide students from the ground up in building commercially viable e-commerce websites while mastering essential digital marketing technologies. The curriculum comprehensively covers front-end web design, back-end cloud hosting and architecture, and search engine optimization (SEO) techniques, alongside the forward-looking integration of cutting-edge AI Agent tools. In terms of web development, the course adopts a step-by-step full-stack pedagogical approach. Front-end development relies on HTML and CSS as fundamental building blocks for web structure and styling. Combined with JavaScript—widely adopted as an introductory programming language, including at Stanford University—students progressively master coding fundamentals, interactive controls, and client-side behavioral tracking. Furthermore, the course incorporates Bootstrap responsive web design (RWD) to ensure optimal user experiences across all devices. For the back-end, students gain hands-on experience with server deployment (IIS, Apache), database technology (PHP + MySQL), and domain name (DNS) configuration, establishing a solid understanding of complete commercial website infrastructure. A defining highlight of this course lies in the seamless fusion of advanced technology and business marketing. Students will gain practical experience leveraging next-generation AI agents—such as Manus and Google AntiGravity—to automate development workflows, smart site building, and cloud hosting deployment. In the domain of digital marketing and traffic generation, the course prioritizes practical execution over abstract theory. The curriculum covers four major SEO pillars: configuring page TDK tags for search engine indexing, utilizing Google Search Console (GSC) for site indexing and performance analysis, embedding popular and long-tail keywords to boost ranking, and executing image SEO. Through the integration of these key technologies, students will optimize digital workflows and maximize the marketing impact of e-commerce platforms.

課程進度

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

評量方式

1.教室735只有40個座位，預估經管學生選修後會額滿，所以不會收外系學生 2.上課實作範例加分30%，作業分數10%，期中side project 30%，期末考30% 3.上課很多實作。

教材

【遵守智慧財產權觀念，請使用正版教科書，不得使用非法影印教科書】 使用外文原文書：否 1.自編教學網站： （A）網頁設計與架站技術： https://acupun.site/lecture/cmedia/ （B）電子商務相關技術： https://acupun.site/lecture/Ecommerce （C）數位行銷，SEO技術，偵測客戶在網站的行為技術： https://acupun.site/lecture/GA