任务13.1 案例分析

网页设计项目教程（HTML5+CSS3+JavaScript）模块13网页开发综合案例任务13.1案例分析学习目标认识网页开发综合案例的整体结构与开发流程，为后续分模块实现打下基础知识目标掌握HTML标签的结构和使用场景；掌握CSS的选择器、盒模型与布局方法；掌握JavaScript的基础语法、DOM操作和事件处理。能力目标会熟练使用HTML5编写网页结构代码；会熟练使用CSS3编写网页样式代码；会熟练使用JavaScript编写并调试脚本代码。素养目标培养技术整合的能力；培养分析、解决问题的能力；面对复杂需求会分解为多个小问题逐步解决。任务描述开发网页之前，先分析页面的主要结构和功能，对页面形成整体认识"武汉市文化和旅游局"门户网站中的"文化旅游"网页为广大游客提供了详细、准确、全面的旅游信息，在内容组织上做到了条理清晰、简单易懂，能够让用户快速查找到相关信息的入口。在开发网页之前，需要分析出页面的主要结构和功能，使得开发者对"文化旅游"页面有整体的认识。本任务目标：通过页面展示与页面模块的分析，弄清"文化旅游"网页由"页面顶部"和"页面主体"两个模块构成，明确各子模块的内容与交互功能，为分模块编码做好准备。13.1.1页面展示适配Web端的页面效果，通过Chrome、火狐、360等浏览器访问"文化旅游"网站主要以适配Web端的页面效果为主，通过Chrome、火狐、360等浏览器访问该网站，所展示的页面效果如图13-1所示。布局简洁明了整体采用上下结构，模块划分一目了然。信息层次清晰顶部信息、主体内容自上而下依次展开。重点内容显眼导航、搜索、轮播等放在显眼位置。浏览体验愉悦方便用户操作，访问轻松愉悦。页面效果（图13-1）顶部：日期+关注渠道+logo+地标轮播主体：导航栏+搜索栏+新闻资讯+文化名录+轮播器页面效果（图13-1）页面布局简洁明了，信息层次清晰，重要内容和功能按钮都放置在显眼位置/whly/2026年9月30日星期三微信|微博|手机版logo地标图片轮播首页政务公开互动交流办事服务文化旅游专题专栏数据开放搜索内容法制建设规划发展头条新闻标题（点击进入详情页）新闻列表项标题文字112-01新闻列表项标题文字212-02法制建设规划发展头条新闻标题（点击进入详情页）新闻列表项标题文字112-01新闻列表项标题文字212-02文化名录图片剧院剧场图书馆博物馆旅游景区旅行社旅游饭店武汉伴手礼（轮播）说明：页面顶部为通栏背景图区域（高480px），页面主体为宽1200px的居中内容区，并通过相对定位上移，覆盖页面顶部的部分区域。页面结构草图（图13-2）基于页面效果绘制结构草图，页面由"顶部"、"主体"两个模块构成页面顶部hdWrap（高480px，背景图）①日期②关注渠道③logo④地标轮播由4个子模块构成页面主体mainWrap（宽1200px水平居中，relative上移）由5个子模块构成→①导航栏+②搜索栏③新闻资讯（选项卡）④文化名录（门户网站入口）⑤轮播器（武汉伴手礼）覆盖顶部区域两个模块互为兄弟关系，模块内部各自展现了一定的布局规律，包含了丰富的页面内容，具有不同的交互功能。13.1.2页面模块页面由"页面顶部"与"页面主体"两个兄弟模块构成页面顶部（图13-3）1①访问日期展示用户当天访问该网站的日期。2②关注渠道微信、微博、手机版三个入口，鼠标悬停展示对应二维码。3③网站logo可点击的网站logo，点击后跳转至官网首页。4④地标轮播轮播展示武汉市的6个地标图片。页面主体（图13-4）1①导航栏排列"首页""政府信息公开"等7个导航选项，方便页面切换。2②搜索栏提供可供用户查找信息的搜索栏。3③新闻资讯以选项卡方式展示不同类型的新闻资讯，可点击进入详情页。4④文化名录展示其他门户网站的入口，点击跳转对应站点。5⑤轮播器轮播武汉伴手礼列表，点击子项跳转对应页面。页面顶部模块（图13-3）标注1、2、3、4四个子模块的布局效果2026年9月30日星期三微信|微博|手机版12二维码网站logo（可点击）3地标图片轮播（6张）4①日期：展示用户当天访问该网站的日期；②关注渠道：列出微信、微博、手机版本三个可了解武汉市文化和旅游局相关信息的关注渠道入口，鼠标放在热点区域则会展示相应的二维码；③logo：可点击的网站logo；④地标轮播：轮播展示武汉市的6个地标图片。页面主体模块（图13-4）标注1、2、3、4、5五个子模块，内容繁多，层次清晰首页政府信息公开互动交流办事服务文化旅游专题专栏数据开放1关键词2法制建设规划发展头条新闻：标题单独一行显示（超出省略号）新闻列表项标题文字12-01新闻列表项标题文字12-02新闻列表项标题文字12-03法制建设规划发展头条新闻：标题单独一行显示（超出省略号）新闻列表项标题文字12-01新闻列表项标题文字12-02新闻列表项标题文字12-033文化名录图片剧院剧场图书馆博物馆旅游景区旅行社旅游饭店4武汉伴手礼武汉伴手礼武汉伴手礼武汉伴手礼5①导航栏②搜索栏③新闻资讯（选项卡）④其他门户网站入口⑤轮播器（武汉伴手礼）模块与内容、交互功能对照梳理各子模块的内容构成与交互功能，明确后续编码任务子模块内容构成交互功能顶部①日期当天访问日期文本由JavaScript获取并写入页面（非静态文本）顶部②关注渠道微信、微博、手机版入口鼠标悬停显示二维码，移开后二维码消失顶部③logo网站logo图片点击跳转至官网首页顶部④地标轮播6张武汉地标图片自动轮播，切换时带过渡效果主体①导航栏7个栏目导航选项点击跳转各栏目页面，"文化旅游"为当前项主体②搜索栏搜索类型+输入框+搜索图标点击图标按输入内容跳转搜索结果页主体③新闻资讯两组选项卡+新闻列表鼠标悬停选项即切换选项卡与新闻列表主体④文化名录文化名录图片+6个门户入口点击图片或入口跳转对应站点主体⑤轮播器武汉伴手礼列表轮播展示，点击子项跳转对应页面任务实施列出"页面顶部"、"页面主体"两个模块分别使用了三种编码语言的哪些知识点HTML编码了"文化旅游"页面所展示的内容，CSS通过设置样式美化了页面，JavaScript编码赋予了页面动态效果。请结合页面效果与结构草图分析：这两个模块分别用到了HTML、CSS、JavaScript的哪些知识点。HTML负责页面的内容与结构•div/ul/li/a/img等标签•类名与id的规划命名•select、input等表单元素•选项卡、轮播的结构搭建CSS负责页面的样式与布局•通配重置、浮动、定位•flex弹性布局排列子项•背景图与雪碧图（background-position）•display与opacity控制显隐JavaScript负责页面的动态与交互•window的load事件监听•Date对象格式化日期•DOM获取与innerHTML写入•点击、悬停事件与页面跳转知识点梳理：三种技术在两个模块中的体现按"页面顶部/页面主体"模块归纳HTML、CSS、JavaScript知识点语言页面顶部模块页面主体模块HTML结构标签：div、ul、li、i、a、img类名命名：hdTop/hdTopChannels/hdBody/hdLogo/hdLandmarks结构标签：ul、li、a、select、input选项卡与新闻列表结构、文化名录门户入口列表CSS标签重置、浮动float、相对与绝对定位flex排列关注渠道、background-image背景图opacity控制地标轮播图的显示flex布局（导航、搜索栏、文化名录）display:none/block切换选项卡伪元素装饰、文本溢出省略号、雪碧图background-positionJavaScriptload事件监听、Date对象格式化日期document.getElementById获取元素innerHTML写入页面内容、定时切换轮播onclick点击事件、value与trim取值校验window.open打开搜索结果页getElementsByClassName与className切换选项卡任务小结回顾本任务的案例分析结论看效果该页面适配Web端，布局简洁明了、信息层次清晰，重要内容和功能按钮放在显眼位置。画草图基于页面效果绘制结构