网页设计作为数字技术的基础应用能力，是推进数字中国建设、落实网络强国战略的重要支撑。无论是企业官网，还是电子商务平台，一个优秀的网页不仅能有效传递信息，还能提升用户体验。本书旨在帮助初学者快速掌握网页设计的核心技能，并通过实践项目逐步提升开发能力。

本书共分为七个项目，从基础的网页结构搭建到复杂的交互特效实现，循序渐进地引导读者学习HTML、CSS、JavaScript 以及 jQuery 等关键技术。本书采用任务驱动式，每个项目设有多个实践任务，包含明确的学习目标、详细的任务步骤、项目总结及拓展练习，使读者能够在动手实践中巩固知识，并灵活运用于实际开发场景。

吴观福 曹 斌 赵 朋 主编

项目一 初探网页设计………………………………………………………………………………………… 1

任务一 创建一个网页项目显示文本与内容标题… …………………………………………………… 1

任务二 设计美观的“卡片”样式展示文本… ………………………………………………………… 10

任务三 用网页展示“校园风采摄影大赛”信息… …………………………………………………… 14

任务四 在容器居中显示一张图片… …………………………………………………………………… 19

任务五 双图并排展示… ………………………………………………………………………………… 22

拓展练习… ………………………………………………………………………………………………… 28

项目二 借助 DeepSeek 创建公司首页… …………………………………………………………………… 33

任务一 应用 DeepSeek 创建一个公司首页… ………………………………………………………… 33

任务二 修改“index.html”导航栏的背景色…………………………………………………………… 39

任务三 为“index.html”增加一个广告区……………………………………………………………… 45

任务四 添加“index.html”的 LOGO 图片…………………………………………………………… 48

任务五 为“index.html”项目内容设置背景图………………………………………………………… 51

拓展练习… ………………………………………………………………………………………………… 56

项目三 学会网页常见布局设计……………………………………………………………………………… 58

任务一 设计网页导航栏和广告区… …………………………………………………………………… 58

任务二 设计“产品服务展示”卡片页面效果… ……………………………………………………… 65

任务三 设计“设计理念”展示页面效果… …………………………………………………………… 72

任务四 设计“图文叠加”广告页面… ………………………………………………………………… 80

任务五 设计底部“多列信息”页面效果… …………………………………………………………… 87

拓展练习… ………………………………………………………………………………………………… 95

项目四 JavaScript 技能基础…………………………………………………………………………………… 98

任务一 更换页面背景颜色… …………………………………………………………………………… 98

任务二 实现得分牌功能… …………………………………………………………………………… 104

任务三 实现图片变大变小… ………………………………………………………………………… 113

任务四 实现门票计算功能… ………………………………………………………………………… 121

任务五 实现“密码强度验证”功能… ……………………………………………………………… 129

拓展练习… ……………………………………………………………………………………………… 139

项目五 学会 JavaScript 常见特效设计… ………………………………………………………………… 142

任务一 实现点击轮播图特效… ……………………………………………………………………… 142

任务二 实现“自动下拉全屏广告”特效… ………………………………………………………… 150

任务三 实现“选项卡”展示特效… ………………………………………………………………… 157

任务四 实现“时间轴”折叠特效… ………………………………………………………………… 165

任务五 实现“抽奖”功能特效… …………………………………………………………………… 172

拓展练习… ……………………………………………………………………………………………… 180

项目六 学会 jQuery.js 常见特效设计… …………………………………………………………………… 183

任务一 用 jQuery 控制数字加减… …………………………………………………………………… 183

任务二 用 jQuery 实现两数计算器… ………………………………………………………………… 189

任务三 用 jQuery 实现一个元素隐藏与显示的功能… ……………………………………………… 197

任务四 用 jQuery 实现单击元素切换背景色的功能… ……………………………………………… 202

任务五 用 jQuery 实现元素变大变小的功能… ……………………………………………………… 207

拓展练习… ……………………………………………………………………………………………… 213

项目七 综合项目——设计一个多页网站………………………………………………………………… 216

任务一 设计网站首页并实现全站导航… …………………………………………………………… 216

任务二 设计“数字化办公室”子页面… …………………………………………………………… 227

任务三 设计“解决方案”子页面… ………………………………………………………………… 232

任务四 设计“成功案例”子页面… ………………………………………………………………… 240

拓展练习… ……………………………………………………………………………………………… 248

参考文献……………………………………………………………………………………………………… 250