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

项目9智能编程与助农产品网站开发目录01项目情境&学习目标02工具清单03知识准备04项目实施05项目拓展&项目小结01项目情境&学习目标项目情景田源鲜品农产品有限公司是一家扎根本地乡村、专注原生态农产品的中小型企业，主营高山云雾茶、散养土鸡蛋、原生态大米、手工腊味及当季果蔬。公司要求制作一个简单的产品展示静态网站，要求如下无需复杂功能，只需清晰展示产品图片、参数、产地、价格及企业联系方式，适配手机和计算机，方便客户自主查看。作为市场部的成员小张，决定以豆包为指导，从零制作可公网访问的美观网页，解决公司推广难题。本项目使用AI工具辅助编程，实现丰富、美观的网站开发。学习目标（1）理解静态网站的概念，明确其适配产品展示的特点及核心用途。（2）明确产品展示型网站的核心模块及各模块的核心内容。（3）掌握用豆包生成代码、替换素材制作网站的核心逻辑。知识目标（1）能向豆包清晰描述农产品网站样式、内容，生成准确指令。（2）能复制豆包生成的代码，替换素材填充公司真实信息。（3）能跟随豆包步骤，将网站发布到免费平台，生成公网网址。（4）能向豆包描述网页小问题，获取解决方案并修改。能力目标（1）建立技术服务农产品推广思维，用工具解决企业难题。（2）培养拆解问题能力，将网站制作拆分为小任务逐步完成。（3）提升自主解决问题的信心。素养目标02工具清单工具清单豆包豆包可精准解读自然语言需求，生成规范代码，支持高亮查看与一键复制，简化编程操作。用户文字描述就能调整页面样式、布局与交互。依托上下文记忆，可跟进项目分步开发迭代，还能诊断修复程序问题并通俗讲解原理。它构建全流程编程辅助体系，助力零基础人群轻松搭建优化展示类网站。HBuilderXHBuilderX是免费轻便的专业代码编辑工具，操作简易，适配多系统，解压即可使用，新手上手门槛低。软件界面清爽运行顺畅，自带HTML、CSS语法高亮，搭配代码提示与自动补全功能，便于辨识修改代码、减少失误，编辑效率高，十分适合新手制作静态网页。03知识准备静态网站简介HTML、CSS、JavaScript文件组成，无后台数据库，开发维护成本低，主打信息展示结构简易上手轻松制作门槛不高，依托工具可生成网页，零基础也能自主运维更新。体验感佳页面加载速度快，可适配多类设备，浏览观感更好。静态网站的关键技术

作为网页基础骨架语言，负责搭建页面整体结构，划分文字、图片、按钮、栏目等各类内容板块，确定网页基础排版框架，是网页内容呈现的根本载体，所有网页内容都依托它进行布局展示。01HTML

网页样式美化技术，用来修饰页面外观，可调整文字字体色彩、图片尺寸、页面布局间距，还能设定背景样式，让单调的页面变得美观规整，提升整体视觉效果。02CSS

网页交互功能脚本语言，赋予页面动态效果，可实现点击响应、弹窗提示、内容切换等操作，增强页面灵动性，丰富用户浏览互动体验。03JavaScript04项目实施

任务1：生成网站的基础框架任务1 生成网站的基础框架任务目标（1）向豆包清晰描述田源鲜品网站的框架需求、风格定位，生成准确指令。（2）将豆包生成的代码复制到HBuilderX，在浏览器中预览网站基础框架。（3）根据预览效果，向豆包提出修改意见，优化框架风格。核心技能（1）能用自然语言清晰地描述农产品网站框架和风格需求。（2）掌握复制、粘贴、保存代码，用浏览器预览网页的基础操作。（3）能基于预览效果，精准向豆包描述修改需求。会议纪要智能生成整理框架需求步骤1新建项目、保存代码并预览网站基础框架步骤2调整框架风格，贴合田源鲜品定位步骤3步骤1：整理框架需求结合田源鲜品网站定位，梳理模块、风格与适配要求，整理出规范完整的制作指令。梳理拟定指令预览核验页面01020304提交生成代码把整理好的指令发送至豆包，等待平台处理，自动生成对应的网页HTML代码。点击预览按钮查看展示效果，逐项检查导航栏、企业简介等核心模块完整性。补充优化完善针对页面缺失内容下发补充指令，重新生成代码，迭代完善整体页面效果。步骤1：整理框架需求步骤2：新建项目、保存代码并预览网站基础框架在HBuilderX界面中选择“文件”→“新建”→“项目”选项，弹出“新建项目”对话框步骤2：新建项目、保存代码并预览网站基础框架项目名称：输入“tianyuanxianpin-website”。01保存路径：单击对“浏览”按钮，选择保存路径。02选择“基本HTML项目”模板。03单击“创建”按钮，新建的“tianyuanxianpin-website”项目04步骤2：新建项目、保存代码并预览网站基础框架复制代码豆包HBuilderX步骤2：新建项目、保存代码并预览网站基础框架选择“运行”→“运行到浏览器”选项选择已安装的浏览器预览

步骤3：调整框架风格，贴合田源鲜品定位01020304结合田源鲜品乡村自然、原生态的定位，逐一检查框架的风格、排版、细节，记录需要修改的具体问题。排查框架需修改的问题替换代码并保存发送修改指令确认修改效果，如仍有不满意的地方，重复步骤1～4，直到满意为止重新预览并确认效果打开豆包，将记录的修改问题整理成清晰的修改指令打开HBuilderX的“index.html”文件，将豆包修改后的代码替换原内容步骤3：调整框架风格，贴合田源鲜品定位04项目实施

任务2：填充网站真实素材任务2 填充网站真实素材任务目标（1）熟练替换代码中的占位文字和占位图片，填充企业简介、产品信息等信息。（2）借助豆包调整产品图片大小、文字排版、产品卡片样式，确保农产品展示美观、清晰，突出产地优势和原生态卖点。（3）新增产品的详情页，实现“单击产品分类页的产品，跳转至对应详情页”的基础功能。核心技能（1）掌握替换网页文字、图片素材的操作能力（重点是修改图片路径）。（2）熟悉描述农产品展示的排版需求，借助豆包进行优化的能力。（3）掌握跟随豆包的指导，实现“页面跳转”的基础操作能力。填充网站真实素材步骤2准备并整理真实素材步骤1步骤3步骤4替换首页的企业信息和核心产品推荐添加产品详情页并实现跳转整体检查网站内容

步骤1：准备并整理真实素材新建素材文件夹01整理企业素材整理品公司LOGO图片、公司实景图、公司简介文案。整理产品素材0203新建一个文件夹，并命名为tianyuanxianpin_x0002_material”明确产品分类及数量保存产品素材步骤2：替换首页的企业信息和核心产品推荐打开HBuilderX的中“index.html”代码界面，在代码中查找“企业简介”相关的占位文字。并全部选中，粘贴复制的企业简介文案，替换占位文字替换首页企业简介步骤2：替换首页的企业信息和核心产品推荐步骤2：替换首页的企业信息和核心产品推荐替换首页企业实景图打开豆包，输入：我要修改企业简介模块的图片，将图片名换成company1.jpg，请告诉我如何修改。步骤2：替换首页的企业信息和核心产品推荐步骤2：替换首页的企业信息和核心产品推荐替换首页产品文字信息打开豆包，输入：我需要将核心产品推荐的各个板块中的图片换成对应产品的产品图片，请告诉我如何修改。。步骤3：添加产品详情页并实现跳转豆包生成步骤3：添加产品详情页并实现跳转代码预览效果步骤3：添加产品详情页并实现跳转打开豆包，发送指令：“帮我在index.html核心产品推荐中“明前高山云雾茶”的代码添加跳转功能，单击图片或产品名称，跳转到‘tea1.html’文件，保持原有样式不变”，并粘贴选中的代码。豆包将返回已添加跳转逻辑的完整代码片段。向豆包发送指令并获取修改后代码在HBuilderX中定位原index.html文件中对应‘明前高山云雾茶’的HTML代码段，选中并粘贴豆包返回的修改后代码，确保结构与样式完全一致，最后按Ctrl+S保存文件。在HBuilderX中替换并保存步骤3：添加产品详情页并实现跳转（1）生成各产品详情页文件为每款产品分别创建独立的HTML详情页，严格按命名规范生成文件：散养土鸡蛋对应'egg1.html'，雨前高山云雾茶对应'tea2.html'，土鸭蛋对应'egg2.html'，依此类推；所有文件均保存在与index.html同级的目录下。（2）定制化填充详情页内容在每个详情页中，精准替换豆包指令中的关键字段：产品名称、图片路径（如./images/egg1.jpg）、技术参数、核心卖点（如‘散养180天’‘海拔800米云雾茶园’）、销售价格（如¥29.9/盒），确保信息与对应产品完全一致且无交叉错误。（3）配置统一跳转链接在首页index.html中，为每个产品入口设置href属性，直接指向对应详情页文件名（如<ahref='egg1.html'>散养土鸡蛋</a>），不添加路径前缀或斜杠，确保相对路径有效、跳转准确、所有页面位于同一目录层级。步骤3：添加产品详情页并实现跳转预览首页右键单击“index.html”文件，选择默认浏览器预览首页。测试产品跳转单击产品分类区的任意产品（如明前高山云雾茶、散养土鸡蛋），查看是否能成功打开对应的详情页。问题诊断与求助若跳转失败，打开豆包，描述问题，并粘贴对应的跳转代码。修复与验证按豆包返回的修改方案，调整代码，保存后再次测试，直至所有产品都能成功跳转至对应详情页。步骤4：网站内容整体检查01全面预览网页浏览整个网页，检查以下内容：①

企业信息完整准确；②

产品分类区所有产品图文一致、排版整齐；③

所有产品能成功跳转至对应详情页，详情页信息完整；④

联系我们区信息准确、二维码正常。02手机端适配检查电脑浏览器中切换到手机模式，检查排版是否整齐、图片是否完整、跳转是否正常。03问题修改若发现任何问题（如图片不显示、跳转失败、文字错误），借助豆包修改代码，保存后重新预览。04保存所有文件确认所有修改无误后，确保所有修改都已保存，完成任务二的全部操作。04项目实施

任务3：发布分享网站任务3 发布分享网站任务目标（1）跟随豆包的分步指导，注册国内免费上线平台（腾讯云）账号，完成基础设置。（2）将网站的所有文件上传到平台，开启静态网站托管功能。（3）测试上线后的网址，确保所有页面、图片、跳转功能均正常显示，适配手机和计算机访问。（4）将生成的网址分享给客户，并借助豆包解决上线后的小问题。核心技能（1）能够跟随分步指南，完成免费上线平台注册和文件上传操作。（2）能够测试上线后网页的功能。（3）能够向豆包描述上线后的问题，获取解决方案并完成修改。发布分享网站注册腾讯云账号并开通CloudBase服务步骤1创建云开发环境并设置静态网站托管步骤2测试网站访问效果，确保所有功能正常步骤3步骤1：注册腾讯云账号并开通CloudBase服务打开腾讯云官网，单击右上角“注册”，选择“个人注册”，根据要求完成注册及实名认证。实名认证通过后，在腾讯云首页搜索框输入“CloudBase”，单击搜索结果中的“云开发CloudBase”，进入CloudBase服务页面，单击“开通CloudBase服务”。步骤2：创建云开发环境并设置静态网站托管进入CloudBase服务页面，单击“创建环境”按钮，弹出“创建环境”对话框，进行以下设置。（1）环境名称：输入“tianyuanxianpin-website”。（2）环境类型：选择“基础版”。（3）地域：选择距离本地最近的地域。（4）其他设置：全部保持默认，无需选择额外功能。（5）单击“创建”按钮。步骤2：创建云开发环境并设置静态网站托管步骤2：创建云开发环境并设置静态网站托管单击“基础配置”，找到“默认域名”，记住该域名（后续用于访问网站）。步骤2：创建云开发环境并设置静态网站托管选择“文件管理”选项卡，进入文件管理页面，上传网站文件及素材文件夹。步骤3：测试网站访问效果，确保所有功能正常返回腾讯云CloudBase“静态网站托管”→“基础配置”页面，找到“默认域名”，格式通常为“”），单击域名右侧的“复制”按钮在浏览器中输入复制的域名，可以访问网站。步骤3：测试网站访问效果，确保所有功能正常若测试时出现问题(如图片不显示、页面跳转失败、排版错乱),无需手动修改代码,按以下步骤操作即可。（1）打开豆包,清晰描述问题。例如:“我将田源鲜品网站上传到腾讯云CloudBase后,访问时产品图片不显示,页面跳转提示‘找不到页面’,请帮我分析原因并给出具体解决步骤,适合非计算机专业人员操作。”（2）豆包自动分析问题(通常是图片路径错误、文件上传不完整或域名配置问题),并给出分步解决指南,如“检查img文件夹上传是否完整,确保产品图片路径为‘img/图片名称.jpg’,重新上传缺失的图片”。（3）跟随豆包的指南,在HBuilderX中修改对应问题(如调整图片路径),修改后保存文件,再重新上传到腾讯云CloudBase,覆盖原有文件,再次测试,直至所有功能正常。步骤3：测试网站访问效果，确保所有功能正常默认域名是腾讯云CloudBase自动生成的免费域名，用于网站测试和初期推广。其优点是无需申请，免费使用；缺点是域名较长、辨识度低，且包含平台后缀，不够贴合企业品牌形象。自定义域名是企业自主申请的专属域名（如），需自行购买，优点是简洁好记，有专属品牌标识，能提升企业专业性和客户信任度。当网站测试完毕、所有功能均正常后，可借助豆包指导完成正式域名的申请、备案及绑定，替换后默认域名仍可使用，也可选择关闭，实现网站的品牌化展示。05项目拓展&项目小结项目拓展

基于已掌握的网站搭建、素材整理、上线发布3项核心技能，本次拓展任务需针对现有网站进行功能补充与优化，确保网站实用性更强，更贴合田源鲜品推广需求。

核心要求：聚焦现有网站未完成的基础实用功能，借助豆包，在原有网站框架和素材基础上，补充两项核心实用功能，优化现有细节，不新增复杂操作，不改变原有目录规范，确保优化后网站适配手机和计算机端，操作简单，维护便捷。

具体实操步骤如下。（1）结合现有网站，