AIGC项目实践：从入门到行业应用电子教案 项目9 智能编程与助农产品网站开发

PAGE2课程名称人工智能通识/AIGC应用与实践授课教师课程性质公共基础课/专业选修课课程类型理实一体化授课学时8日期/节次班级地点教学任务项目9智能编程与助农产品网站开发教学目标素质目标（1）建立技术服务农产品推广思维，用工具解决企业难题。（2）培养拆解问题能力，将网站制作拆分为小任务逐步完成。（3）提升自主解决问题信心，借助AI工具实现需求赋能企业。知识目标（1）理解静态网站核心，明确其适配产品展示的特点及核心用途。（2）明确产品展示型网站的核心模块及各模块核心内容。（3）掌握用豆包生成代码、替换素材制作网站的核心逻辑能力目标（1）能向豆包清晰描述农产品网站样式、内容，生成准确指令。（2）能复制豆包生成的代码，替换素材填充企业真实信息。（3）能跟随豆包步骤，将网站发布到免费平台生成公网网址。（4）能向豆包描述网页小问题，获取解决方案并修改。教学重点（1）向AI精准描述需求获取网页代码，HBuilderX代码替换与本地预览。（2）素材规范化命名、图片路径修改、首页与详情页跳转设置。（3）腾讯云静态网站托管、项目文件上传部署。教学难点（1）精准描述修改需求，利用AI解决网页样式、排版、图片异常问题。（2）理解网页图片相对路径规则，解决上线后图片丢失、跳转失效问题。学情分析（1）知识基础学生为零基础，无编程背景，对网站开发的技术原理（如HTML、CSS、数据库等）缺乏认知；适合AI辅助零代码建站模式。（2）能力水平熟练基础电脑文件操作，会文件重命名、文件夹分类，具备基本的素材整理与文件管理能力。（3）学习特点学生偏好直观、低门槛的操作方式，对AI辅助工具接受度高；适合通过图形化界面、拖拽式操作完成任务。（4）态度与认知误区学生可能对AI建站产生“一键生成”的过度依赖，忽视内容规划、页面布局逻辑等人工策划的重要性；需引导理解AI是辅助工具而非完全替代人工决策。课程思政元素（1）数字助农：借助网站搭建助力乡村农产品线上宣传，体会数字化赋能乡村振兴。（2）严谨规范：素材统一命名、项目规范归档，培养企业标准化办公素养。（3）理性用AI：AI为工具，人工验收把关成果，杜绝完全依赖AI、放任错误。劳动教育内容（1）素材分类整理：统一规范命名图片、文案，建立标准化素材库，养成精细化劳动习惯。（2）项目全流程归档：本地项目、素材包、上线资料分文件夹保存。（3）反复调试整改：网页bug逐项排查修改，培养耐心细致的实操劳动品质。教学资源（1）硬件：多媒体机房、学生机联网、投影。（2）软件：AIGC资源导航平台、HBuilderX、浏览器、豆包、腾讯云官网（CloudBase云开发）。（3）素材：配套资源包。（4）课件：项目9教学PPT、操作步骤截图。（5）平台：超星学习通等学习平台（发布作业、提交、批阅）。教学环节教学任务教师活动学生活动课前课前导学发布预习课件：静态网站基础结构、腾讯云注册须知预习网页基础构成，提前下载安装HBuilderX课中课中教学案例导入+分步演示+巡回指导+重难点答疑跟随实操、分组互助、分步完成网站任务课后课后作业发布课后练习、批阅作业、点评共性问题、优秀案例展示完成课后两道实操题，平台提交项目压缩包教学设计第1学时：知识准备+任务1需求梳理与AI生成网站基础框架一、情境导入（8分钟）（1）案例导入：田源鲜品线下推广受限、宣传分散，需轻量化官网展示农产品、提升信任度。（2）知识铺垫：讲解静态网站特点（纯展示、无数据库、加载快、易维护），对比动态网站，明确本项目采用HTML+CSS+JS+响应式适配实现。（3）明确本课目标：整理需求→AI生成代码→本地预览框架。二、新知讲授+实操演示（22分钟）（1）讲解网站五大固定模块：导航栏、Banner、企业简介、产品分类、联系我们，确定乡村自然风（深绿+米白）。（2）演示向豆包发送完整建站指令，生成HTML代码，使用预览功能核验模块完整性。（3）HBuilderX实操：新建普通HTML项目，命名tianyuanxianpin-website，保存至桌面，使用基础HTML模板。（4）复制AI代码→清空默认index.html→粘贴保存→运行到浏览器预览。（5）根据预览问题（字体、尺寸、样式）撰写修改指令，交由AI优化后替换代码。三、学生实操（7分钟）学生完成需求撰写、AI生成代码、新建项目、粘贴预览，教师纠正命名、路径、保存错误。四、课时小结+预习（3分钟）小结：框架四步：需求→AI生成→新建项目→预览微调。预习：查看素材文件夹结构，了解图片命名规则。第2学时：任务1框架优化+项目目录规范与代码替换一、复习回顾（5分钟）回顾上节课框架预览效果，抽查项目目录结构，强调img、css、js规范用途。二、新知讲授+实操演示（22分钟）（1）框架问题集中整改：导航字体、Banner比例、产品卡片圆角、间距、主色调统一。（2）演示图片路径统一设置为img/xxx.jpg，便于后续批量替换。（3）再次生成优化后代码，全量替换index.html，保存并重新预览。（4）讲解HTML骨架作用、CSS美化逻辑、JS交互作用、响应式适配意义（无需写代码，只需识别功能）。（5）确认电脑/手机双端显示正常，模块无缺失、排版不错乱。三、学生实操（10分钟）学生完成框架优化整改，教师重点检查代码替换、路径规范、预览效果。四、小结+预习（3分钟）小结：框架合格标准：模块全、风格统一、路径规范、适配正常。预习：准备企业简介、产品文字、图片素材。第3学时：任务2素材整理+首页文字与企业图片替换一、复习回顾（5分钟）回顾网站框架完成情况，明确本节课进入真实内容填充阶段。二、新知讲授+实操演示（22分钟）（1）素材规范：桌面新建tianyuanxianpin-material，统一命名logo.png、company1.jpg、company2.jpg。（2）首页文字替换：复制企业简介，在index.html中查找占位文字并完整替换。（3）企业图片替换：将素材复制到项目img文件夹，借助AI定位图片代码位置，修改图片名称。（4）预览检查：文字无误、图片显示正常、无错位重叠。三、学生实操（10分钟）学生完成素材整理、首页文字与企业图片替换，教师重点纠正图片存放路径错误。四、小结+预习（3分钟）小结：素材替换三步：规整→文字替换→图片路径修改。预习：产品名称、卖点、价格、产品图片命名规则。第4学时：任务2核心产品板块图文替换与排版优化一、复习回顾（5分钟）回顾企业信息替换成果，进入产品展示区内容填充。二、新知讲授+实操演示（22分钟）（1）产品素材命名规范：tea1_1.jpg、tea1_2.jpg、tea1_3.jpg等规则讲解。（2）演示替换产品名称、价格、卖点、产品图片，确保每款产品信息对应准确。（3）排版异常处理：图片大小不一、文字重叠、卡片不齐，交由AI优化代码后替换。（4）统一产品区风格：深绿主题、卡片间距、文字对齐、响应式显示正常。三、学生实操（10分钟）学生完成全部产品图文替换与排版优化，教师巡查图文对应、路径正确。四、小结+预习（3分钟）小结：产品区要点：信息准确、图片清晰、排版整齐、风格统一。预习：产品详情页制作思路与页面跳转基本逻辑。第5学时：任务2AI生成产品详情页+页面跳转设置一、课程导入（5分钟）导入痛点：首页仅简介，客户需查看参数，需新增详情页并实现点击跳转。二、新知讲授+演示（22分钟）（1）编写详情页AI指令：包含产品参数、3张图片路径、风格统一、导航保留、文件名规范。（2）HBuilderX新建html文件：tea1.html、egg1.html，粘贴AI代码并保存。（3）跳转配置：向AI请求在首页产品卡片添加超链接，实现点击跳转详情页。（4）批量制作：按同款逻辑生成多款产品详情页并配置跳转。（5）本地全页面测试：点击、跳转、返回、图文显示正常。三、学生实操（10分钟）完成至少2款产品详情页与跳转设置，自测功能可用。四、小结+预习（3分钟）小结：详情页+跳转流程：AI生成→新建文件→加链接→测试。预习：腾讯云CloudBase注册、实名认证、静态网站托管流程。第6学时：任务2全站自检+双端适配优化+内容最终定稿一、复习回顾（5分钟）回顾详情页与跳转完成情况，进行全站最终检查与优化。二、新知讲授+实操演示（22分钟）（1）电脑端全站浏览：导航、Banner、简介、产品、详情、联系我们逐项核对。（2）手机端模拟器检查：响应式排版、图片大小、文字换行、按钮可点。（3）故障集中处理：图片不显示、跳转失败、文字错误、路径异常，统一由AI排查修复。（4）最终定稿：所有文件保存、素材齐全、目录规范、无错漏。三、学生实操（10分钟）学生完成全站自检与优化，确保本地100%正常。四、小结+预习（3分钟）小结：本地定稿三要素：内容准确、功能正常、适配完美。预习：云端发布准备：账号、文件打包、上传顺序。第7学时：任务3腾讯云CloudBase注册+静态网站托管开通一、回顾导入（5分钟）回顾本地完整网站结构，引出本节课目标：上线公网、实现远程访问。二、新知讲授+演示（20分钟）（1）腾讯云注册→个人实名认证→搜索CloudBase→进入云开发。（2）创建环境：命名tianyuanxianpin-website，选择基础版，开通静态网站托管。（3）进入文件管理，按顺序上传：img文件夹→index.html→所有详情页html。（4）复制默认域名，浏览器访问测试，检查图片、页面、跳转是否正常。三、学生实操（10分钟）学生完成注册、开通、上传、初次访问测试，教师协助解决登录与上传问题。四、课时小结+预习（3分钟）小结：上线三步：注册→创建环境→上传文件→测试访问。预习：上线故障排查方法、向AI描述问题的技巧。第8学时：任务3上线故障排查+全课总结+课后作业一、回顾导入（5分钟）回顾网站上线情况，集中解决公网访问问题，完成最终验收。二、新知讲授+演示（20分钟）（1）常见上线问题排查：图片不显示、页面404、跳转失败、排版异常。（2）向AI清晰描述故障，获取定位与修复步骤，本地改码后重新上传覆盖。（3）讲解默认域名与自定义域名区别，提供后期品牌化升级思路。（4）项目全流程总结：AI搭框架→素材填充→详情跳转→云端发布。三、学生实操（10分钟）学生完成故障修复与最终上线验收，生成可分享公网网址。四、全课总结+课后作业布置（5分钟）课程总结：梳理三大任务闭环：AI生成→素材落地→云端发布；强化AI为辅、人工验收、规范命名、路径统一的职业习惯。作业：①新增一款农产品（如高山红薯），完成详情页+跳转，重新上传云端测试；②模拟图片失效故障，