数智媒体技术与应用 课件06 项目实战

第六章项目实战学习目标数字技术与传统文化、体育精神融合下，专题网站成信息传播重要载体，网页需规划与技术实现以打造优质展示平台。本章通过两个实战项目，结合AI工具与Dreamweaver等软件，呈现专题网站构建流程，助力读者掌握网页制作方法。学习目标1．理解专题网站规划逻辑与架构，掌握规范文件/文件夹建立方法；2．掌握AI工具生成网页素材的方法，兼顾版权规范；​3．熟练用Dreamweaver进行站点管理、页面编辑、样式优化与文件关联；​4．熟练整合网页文本、图像、多媒体，实现超链接、表单与交互功能；5．学会统一页面导航与关联设置，保障网站风格一致、跳转流畅；​6．具备专题网站全流程实战能力，能独立完成构建。目录CONTENTES灯彩绮梦——元宵文化专题网站开发文化·体育——体育文化主题网站开发项目总结与拓展PART01灯彩绮梦——元宵文化专题网站开发6.1.1项目概述：确定主题与规划内容网站主题灯彩绮梦——传承千年的元宵文化以中国传统元宵节为核心主题，聚焦花灯艺术与文化传承，展现千年民俗的独特魅力。网站目标系统呈现，多元体验系统呈现元宵节的历史渊源、文化内涵与民俗魅力，打造集知识传播、趣味体验与文化交流于一体的平台。规划内容板块内容说明首页大幅互动图像展示主题，搭配动态文字与导航栏元宵由来介绍元宵节的历史与文化背景花灯赏析展示各地特色花灯图片与介绍灯谜互动提供在线猜灯谜功能投稿我们提供联系表单，收集用户留言与作品6.1.1项目概述：网站架构与文件夹管理网站首页index.html元宵节由来origin.html花灯赏析lanterns.html灯谜互动riddles.html投稿我们contribute.htmlimagesvideo【网站架构】【文件夹管理操作】1在"DCQM"文件夹中新建2个文件夹，分别命名为"video"和"images"。2将"DCQM"文件夹中的素材分别移动到合适的子文件夹中。认识开发工具：豆包AI功能模块核心能力网页开发适配场景多模态交互支持文字指令输入、图片输出1.用文字描述网页需求生成代码2.生成网页所需的Banner图、图标等资源内容生成代码编写、文本创作、格式优化1.生成HTML结构+CSS样式代码2.撰写网页中的介绍文字、栏目名称知识问答解答技术疑问、提供语法参考1.询问TailwindCSS语法2.排查代码报错原因（如路径错误）场景化分身提供“编程助手”“设计助手”等专项模式切换至“编程助手”模式，提升代码生成的准确性和规范性字节生态整合与抖音、今日头条等App内置集成若需在字节系平台嵌入网页，可通过内置豆包快速调整适配方案6.1.2单页功能制作：使用豆包AI制作首页前期准备：登录豆包并切换模式打开豆包官网，完成账号登录。在首页左侧的"模式选择"中，切换至"AI编程"模式。准备本地文件夹：桌面新建"DCQM"文件夹，内部再建"images"子文件夹。首次生成——基础元宵节首页代码"请生成一个关于元宵节文化的单页HTML网页，包含导航栏（首页、元宵由来、花灯赏析）、大幅背景图、标题、介绍文字和页脚。风格典雅，融入中国传统元素（如红色、灯笼图案），使用TailwindCSS实现样式，引入中文书法字体。"操作步骤：输入提示词→生成代码→预览效果→修正语法错误6.1.2单页功能制作：优化提示词生成极简风格单页首页【操作流程】1输入优化提示词2生成新代码3预览确认效果4下载代码保存到"DCQM"文件夹，重命名为"index.html"【优化提示词核心要求】导航栏：红色背景、白色文字，栏目为"首页、元宵由来、花灯赏析、灯谜互动、投稿我们"Banner区域：花灯图片背景，主标题"灯彩绮梦"（MaShanZheng字体）、副标题"传承千年的元宵文化"（NotoSerifSC字体）内容区：欢迎语+4个功能图标（历史由来、花灯艺术、趣味灯谜、传统美食）页脚：版权信息12346.1.2单页功能制作：生成配套资源生成配套资源——Banner图片切换至"图像生成"模式。输入Banner提示词：生成元宵节主题Banner图，尺寸1920×500px，全景视角。核心元素：画面中心3个发光大红灯笼，背景为明月+烟花。生成图片→筛选保存到"images"文件夹→关联图片与代码。6.1.2单页功能制作：问题排查最终预览与问题排查问题现象可能原因解决方案Banner图片不显示1.图片路径错误2.图片格式不是jpg1.确认图片在"images"文件夹，且名为"banner.jpg"2.检查代码中路径是否为"images/banner.jpg"网页无样式（文字杂乱）1.TailwindCSSCDN链接失效2.网络不通1.替换为最新版Tailwind链接2.检查网络是否正常中文书法字体不加载GoogleFonts无法访问替换为国内字体库链接导航栏栏目排列错乱响应式配置缺失在导航栏父容器添加class="flexjustify-centerspace-x-8"6.1.2单页功能制作：成果验收标准文件夹结构DCQM文件夹包含index.html和images子文件夹images内包含banner.jpg图片文件网页元素导航栏（5个栏目）完整呈现Banner（图片+标题）、内容区（欢迎语）图标区（4个功能）、页脚（版权信息）视觉风格红色主色调、极简无多余装饰文字清晰、图片正常显示功能点击导航栏可平滑跳转至对应区域6.1.3多功能制作：元宵由来与花灯赏析页面元宵由来页面制作豆包生成基础代码页面主体分"历史起源""习俗演变""文化意义"三个板块，预留3处图片插入位置Dreamweaver优化与内容补充生成配套主题图片（工笔画风格），替换图片占位符为本地图片路径3页面整体布局采用响应式设计，适配不同屏幕尺寸，保持视觉一致性关键：工笔画风格图片需与整体页面风格协调21花灯赏析页面制作1豆包生成图片展示代码主体为图片画廊，包含6张不同地区的花灯图片，采用2列3行布局Dreamweaver优化替换图片占位符，添加alt属性，优化图片加载性能交互功能说明点击图片可放大预览，提升用户浏览体验关键：图片需添加描述性alt属性以提升无障碍访问26.1.3多功能制作：灯谜互动与投稿我们页面灯谜互动页面制作①页面结构要求页面包含5道经典元宵灯谜，每道灯谜独立成卡片，采用统一视觉风格呈现谜题内容。②交互功能实现实现"用户输入答案→系统判断对错→显示解析"的完整交互流程，提升用户参与体验。操作步骤：生成代码测试交互功能保存为"riddles.html"投稿我们页面制作①表单元素设计表单包含：姓名输入框、邮箱输入框、投稿类型选择、内容框、提交按钮，各元素布局清晰美观。②表单验证逻辑表单提交时验证必填项是否完整填写，同时校验邮箱格式是否符合规范，给出相应提示信息。操作步骤：生成代码检查表单元素保存为"contribute.html"6.1.4网站规划及制作实战：Dreamweaver站点管理【创建站点】1打开Dreamweaver，单击"站点"→"新建站点"。2站点名称输入"灯彩绮梦-元宵文化网站"。3本地站点文件夹选择"DCQM"根目录路径。4单击"保存"。【管理文件与素材】在"文件"面板中管理所有网站文件。替换素材时自动更新页面路径，避免手动修改错误。6.1.4网站规划及制作实战：页面间导航关联及优化1统一导航链接同时加载5个页面文件。复制首页导航代码替换其他页面对应位置。为每个页面的"当前栏目"添加金色+下划线样式。2统一页面格式确认所有页面Tailwind配置、字体设置一致。调整页面标题格式，保持风格统一。3优化首页页面将"传统美食"修改为"联系我们"。为功能图标添加对应页面链接。4测试导航跳转点击所有导航链接，确认跳转正常，路径为相对路径。6.1.5项目小结：核心收获与后续优化方向【核心收获】1.借精准提示词让豆包生成网页代码、主题素材，大幅降低编程门槛。2.梳理"主题确定到整合测试"的网页开发全流程，掌握关键知识点。3.学会用Dreamweaver优化样式、管理站点。【后续优化方向】-功能升级：添加用户注册登录、评论互动功能。-内容丰富：增加更多地区元宵习俗、非遗传承人介绍。-风格优化：适配移动端响应式布局。PART02文化·体育——体育文化主题网站开发6.2.1项目概述：网站主题【网站主题】文化·体育传统文化体育精神【网站目标】在中华民族辉煌的历史画卷中，体育文化以其独特的魅力占据着重要一席。学校体育社的主题网站希望成为桥梁，帮助同学们深刻感受到传统文化与体育精神的交融与共振。6.2.1项目概述：网站内容板块内容说明首页大幅互动图像呈现网站主题哲学对话展示专家访谈、学术报告探讨中华文化中的体育精神与奥林匹克哲学的共通之处文化探索展示同学们设计的体育IP形象设计作品双奥之城结合古代体育名画和校园生活创作多样多媒体作品寄语自己提供展示平台，同学们分享对体育精神的感悟投稿我们提供联系表单，建立沟通渠道6.2.1项目概述：网站框架网站页面首页index.html哲学对话zxdh.html文化探索whts.html双奥之城sazc.html寄语自己jyzj.html投稿我们tgwm.html资源videofileimagesflash6.2.2素材搜集与制作：图像与音频素材制作图像素材素材类型制作要求首页大图AI生成+背景图合成，保存为index_bj1.jpg、index_bj2.jpgPDF文件处理为PDF页面添加"点击图片查看原文"文字，保存为pdf-1.png、pdf-2.png、pdf-3.png双奥之城海报图层效果处理，保存为bjb.jpg体育IP形象设计创意设计+AI生成3D效果、毛绒质感体育明信片蒙版效果+IP印章装饰，保存为mxp.png音频素材制作AI生成体育相关歌词、歌曲和播客。保存播客文件为"运动中的光影与力量.mp3"到video文件夹。保存歌曲分享链接到"歌曲链接.txt"到file文件夹。6.2.3网站制作：整体流程概览1制作CSS样式表文件定义网站统一样式规范页面视觉效果2制作母版页面创建统一架构模板提高开发效率3核心页面制作首页/哲学对话文化探索4核心页面制作双奥之城/寄语自己投稿我们5制作游戏页面AI辅助生成小程序开发网站文件结构📁WHTY/├─video/（视频）├─file/（文字）├─images/（图像）├─flash/（动画）└─页面HTML文件├─index.html├─*.html6.2.3网站制作：制作css样式表文件【样式表创建要求】1文件命名规范创建文件名为newzt.css2存储位置保存至网站根目录WHTY文件夹3核心作用定义网站全局样式，确保各页面风格统一操作步骤在Dreamweaver中打开站点"文化与体育"【文件】→【新建】→选择"CSS"文件类型编写CSS样式代码（见右侧示例）【文件】→【保存】→输入文件名"newzt.css"确认文件保存在WHTY根目录操作注意事项CSS文件必须在所有HTML页面中链接引用样式定义遵循"语义化"命名规则使用相对路径：<linkrel="stylesheet"href="newzt.css">优先使用类选择器，避免ID选择器冲突6.2.3网站制作：制作母版页面1创建站点打开Dreamweaver→【站点】→【新建站点】站点名称：文化与体育本地站点文件夹：选择WHTY根目录点击【保存】完成站点创建2制作统一头部新建HTML文件，命名为mb.html制作头部区域：包含Logo+图标引入CSS样式表：<linkrel="stylesheet"href="newzt.css">3设置导航栏创建导航区域，包含6个栏目：首页哲学对话文化探索双奥之城寄语自己投稿我们为每个栏目设置超链接（指向对应页面）4制作底部包含版权信息、当前日期建议格式：©2026文化·体育网站-传承体育精神5复制母版页面复制mb.html文件重命名为各栏目页面：·index.html（首页）·philosophy.html（哲学对话）·culture.html（文化探索）·olympic.html（双奥之城）·message.html（寄语自己）·contribute.html（投稿我们）6.2.3网站制作：核心页面制作首页index.html制作要点核心功能：鼠标经过图像切换效果准备两张切换图片：index_bj1.jpg、index_bj2.jpg使用Dreamweaver"插入"→"图像对象"→"鼠标经过图像"设置原始图像与鼠标经过图像路径欢迎文字添加网站主题介绍文字，突出"文化·体育"理念哲学对话philosophy.html制作要点核心功能：PDF预览图+超链接准备PDF预览图：pdf-1.png、pdf-2.png、pdf-3.png插入3张PDF预览图为每张图片添加超链接，指向原PDF文件提示文字："点击图片查看原文"关键参数：PDF文件存放于file文件夹，使用相对路径链接文化探索culture.html制作要点核心功能：IP形象滚动展示+悬浮动画插入体育IP形象图片（AI生成）设置容器overflow:scroll实现滚动效果添加CSS动画：@keyframesfloat{}随机悬浮动画效果创意设计：使用AI工具生成3D效果、毛绒质感的体育IP形象6.2.3网站制作：核心页面制作双奥之城olympic.html制作要点核心功能：动态GIF+背景图重复准备素材：bjb.jpg（海报）动态GIF文件插入动态GIF动画设置背景图样式：background-repeat:repeat;关键参数：GIF文件存放于images文件夹，背景图使用CSSrepeat属性寄语自己message.html制作要点核心功能：多媒体整合展示明信片展示：插入体育明信片图片（mxp.png）视频播放：插入视频文件（video文件夹）音频播放：运动中的光影与力量.mp3互动链接：添加分享、评论等互动按钮创意设计：结合明信片装饰效果与多媒体元素，打造沉浸式体验投稿我们contribute.html制作要点核心功能：表单功能文本输入框：姓名、邮箱、联系方式文件上传：支持图片、文档上传提交按钮：表单验证+提交反馈关键参数：必填项验证、邮箱格式验证、文件大小限制6.2.3网站制作：制作游戏页面AI辅助生成小游戏流程1选择AI工具使用AI对话工具（如豆包、Kimi等）2输入游戏需求提示词"请生成一个体育主题的HTML5小游戏（如投篮、踢足球），使用Canvas或原生JavaScript，界面简洁，包含计分功能"3生成代码并测试复制AI生成的代码到文本编辑器保存为game.html文件（存放于WHTY根目录）在浏览器中打开测试游戏功能4代码优化与调整根