网页基础开发教程 9

项目11综合项目实训1制作信创公司网站前端页面掌握网站规划的核心方法，明确网站定位、架构与功能布局。熟悉AI辅助设计工具，利用其智能化功能提升设计效率与创意表现。熟练运用HTML5语义化标签与CSS3样式，构建清晰、规范的网页结构。掌握精灵图与字体图标的使用，优化网页性能与视觉效果。熟练运用CSS实现页面动画效果，增强用户交互体验。任务描述任务实现任务小结任务测试与考核实训1.制作企业首页页面1.网站首页首页制作涵盖网页头部、轮播图宣传栏、侧边导航栏、媒体展示栏、案例展示栏以及页脚部分，整体浏览效果如图11-1所示。具体要求如下：（1）HTML结构网页头部结构；轮播图宣传栏结构；侧边导航栏结构；媒体展示栏结构；案例展示栏结构；固定侧边栏页脚结构。任务描述（2）CSS样式通过通配符设置所有元素的外边距和内边距为0；整体页面的版心宽度设置1200px，并居中显示；整体字体类型为“黑体”，默认字体大小为16px；整体页面字体大小主要有48px、32px、24px、16px；整体页面色调为蓝色（#0066ff）；运用CSS样式完成页面布局，优化视觉呈现，并提升用户交互体验；为侧边导航栏设置固定定位，使其在页面滚动时始终可见；使用精灵图和字体图标，减少页面加载时间，提升页面美观度和一致性。2.制作客户案例页页面客户案例页制作涵盖网页头部、案例展示栏、赋能服务栏以及页脚部分，整体浏览效果如图11-2所示。具体要求如下：（1）HTML结构网页头部结构与网站首页保持一致；轮播图宣传栏结构，与网站首页结构一致，展示内容有所变化；赋能服务栏结构；固定侧边栏、页脚结构与网站首页保持一致。（2）CSS样式通过通配符设置所有元素的外边距和内边距为0；整体页面的版心、字体类型、字体大小、页面色调等与网站首页保持一致；侧边导航栏设置固定定位，与网站首页一致；运用CSS样式完成页面布局，优化视觉呈现，并提升用户交互体验。任务描述任务描述知识准备任务实现任务小结任务测试与考核实训项目实现1：制作企业首页页面见实训手册11.网站首页首页制作涵盖网页头部、轮播图宣传栏、侧边导航栏、媒体展示栏、案例展示栏以及页脚部分，整体浏览效果如图11-1所示。具体要求如下：（1）HTML结构网页头部结构；轮播图宣传栏结构；侧边导航栏结构；媒体展示栏结构；案例展示栏结构；固定侧边栏页脚结构。（2）CSS样式通过通配符设置所有元素的外边距和内边距为0；整体页面的版心宽度设置1200px，并居中显示；整体字体类型为“黑体”，默认字体大小为16px；整体页面字体大小主要有48px、32px、24px、16px；整体页面色调为蓝色（#0066ff）；运用CSS样式完成页面布局，优化视觉呈现，并提升用户交互体验；为侧边导航栏设置固定定位，使其在页面滚动时始终可见；使用精灵图和字体图标，减少页面加载时间，提升页面美观度和一致性。项目实现2：制作客户案例页页面

见实训手册1客户案例页制作涵盖网页头部、案例展示栏、赋能服务栏以及页脚部分，整体浏览效果如图11-2所示。具体要求如下：（1）HTML结构网页头部结构与网站首页保持一致；轮播图宣传栏结构，与网站首页结构一致，展示内容有所变化；赋能服务栏结构；固定侧边栏、页脚结构与网站首页保持一致。（2）CSS样式通过通配符设置所有元素的外边距和内边距为0；整体页面的版心、字体类型、字体大小、页面色调等与网站首页保持一致；侧边导航栏设置固定定位，与网站首页一致；运用CSS样式完成页面布局，优化视觉呈现，并提升用户交互体验。任务描述知识准备任务实现任务小结任务测试与考核实训总结任务描述知识准备任务实现任务小结任务测试与考核实训测试与考核4.下列CSS选择器中，用于选择<div>标签下的所有<p>标签的正确写法是（）。

A.divp B.div>p C.div+p D.div~p一、单选题1.下列CSS选择器中，用于选择页面中所有<p>标签的正确写法是（）。A.#p B..p C.p D.@p2．下列CSS属性中，用于设置文本颜色的是（）。A.font-size B.color C.background-colorD.text-align3．在HTML中，<a>标签的href属性的作用是（

）。A.定义链接的目标地址 B.定义链接的打开方式 C.定义链接的文本内容D.定义链接的样式C5．下列CSS属性中，用于设置元素的边框宽度的是（

）。A.border-width B.border-style C.border-color D.border-radius6．在HTML中，<form>标签的action属性的作用是（

）。A.定义表单的提交方式 B.定义表单的提交地址 C.定义表单的样式 D.定义表单的名称BAAAB测试与考核3．在HTML中，<ul>标签用于定义一个______________。二、填空题1．在HTML中，<title>标签用于定义网页的______________。2．CSS中，______________属性用于设置元素的外边距。标题4．CSS中，______________属性用于设置元素的内边距。5．在HTML中，<inputtype="text">用于创建一个__________________。margin无序列表padding单行文本输入框任务描述知识准备任务实现任务小结任务测试与考核实训综合运用所学HTML+CSS知识，改写网站的“关于信创”页面，具体要求如下：一、实训目的实训1．技术技能提升：掌握HTML与CSS核心技术及网页设计应用。2．创新思维培养：通过动画与交互设计激发创新思维。3．思政教育融入：融入企业责任教育，强化社会责任感与职业道德。4．团队合作精神：通过小组项目培养团队合作与沟通能力。在本实训实现过程中，综合运用所学HTML+CSS知识。设计制作“关于信创”页面，最终“关于信创”浏览效果如图所示。二、实训内容实训1．HTML结构（1）创建一个包含头部、企业使命、企业介绍、核心价值观、技术实力、页脚等部分的网页结构。（2）使用语义化标签，如<header>,<section>,<article>,<footer>等。2．CSS样式（1）统一组件：网页头部、页脚、侧边栏沿用实训样式（2）布局风格：采用浮动和定位布局，保持结构统一（3）字体规范：黑体字体，默认16px，主要字号48/32/24/16px（4）色调设定：主色调蓝色#0066ff（6）悬浮交互：核心价值观、技术实力栏悬停时盒子