鹤壁市第二届职业技能大赛网站设计与开发项目技术工作文件

鹤壁市第二届职业技能大赛组织委员会技术工作组

2023年2月

网站设计与开发项目是指根据项目需求进行站点整体风格

与布局的设计，根据设计的页面实现在各种终端上的页面效果、

交互效果以及后台相应功能的竞赛项目。

选手需要具备熟练的图形图像处理能力和页面元素设计能

力，能够在各类页面中应用所设计的元素和素材，同时还根据注

站点的受众群体，制作更受欢迎的设计和交互效果；使用HTML5

及CSS3按设计稿实现页面，并完成各种交互效果的开发。此外

还要处理好代码编写过程中发生的异常。最终的作品同常用浏览

器以及软硬件之间的兼容性也是十分重要的，需要妥善处理。

在实际工作中，要能理解网站业务制作的技术和艺术价值。

技术的运用是为了将功能帮助网站经营者和用户更好更高效地

工作(自动化)。网站的颜色、字体、图形以及布局则需要富有

创意的设计技巧。用户界面要确保具有良好的可用性，也必须理

解所制作项目的业务内容和网站管理的基础知识。

此表仅供参考，具体比重以试卷为准

15

基本知识个人需要知道和理解：

1

●如何遵循设计原则和模式，以产生美观和创造性

的设计

●同设计的认知、社会、文化、技术和经济背景有

关的问题

●如何凸显站点的目标受众群体

●如何为Web创建和调整图形

●如何在网站中嵌入所创建的动画和视频

●维护企业形象，品牌和风格指南的协议

●互联网设备和对应屏幕分辨率的约束

个人应能够：

●导入并编辑图像

●为网页优化图像

●使用某种图像处理软件创作图像

●使用某种图像处理软件对图片进行切片

●选用可以增强设计效果的布局版式

工作能力●为不同的屏幕分辨率进行设计；对给定的分辨率

进行优化并且页面在不同分辨率的设备中良好工作

●为各种自适应的站点页面设计合适的效果

●创建高效、直观、易用的网站导航，将想法融入

具有美观和创意的设计

●创建的页面布局包含：流式页面、网格页面、页

面留白、均衡的文字图像，清晰的层次

●评判并选择合适的草图设计、颜色和原型

25

2

个人需要知道和理解：

●万维网联盟(W3C)的HTML和CSS标准

●定位和布局方法

基本知识●可用性和交互设计

●对有特殊需要的用户的可访问性和通信

●浏览器兼容性

●搜索引擎优化(SEO)

●创建符合并能通过W3C标准验证的代码

(HTML5,CSS3)

●为各种设备和屏幕分辨率创建可访问和可用的

网站

工作能力

●使用CSS或其他外部文件修改网站的外观

●为用户创建和更新的网站，并协助提升搜索引擎

性能

在需要的地方嵌入和集成动画，音频和视频

3

个人需要知道和理解：

●JavaScript20

基本知识

●如何使用JavaScript来集成库、框架和其他系

统或功能

个人应能够：

●创建网站的动画和交互功能，帮助解释页面内容

工作能力和增加视觉吸引力

●创建和更新JavaScript代码，增强网站功能性，

可用性和美观

3

●使用JavaScript来操作数据和自定义媒体

●创建模块化和可重用的JavaScript代码

4

个人需要知道和理解：

●面向对象思想

●面向对象的PHP

●开源后端类库和框架

基本知识

●如何使用MySQL来设计和实现数据库

●如何管理服务器和客户端系统之间的数据交换

20

●软件设计模式(如MVC)

●网页应用程序的安全性

个人应能够：

●使用编程技能来操作数据，包括本地储存、数据

库和前后端通讯

工作能力

●使用php语言和常见框架(如：Laravel)开发

后端逻辑功能

●创建易读、可维护、可重用的后端代码模块

5

个人需要知道和理解：

基本知识●如何使用最新的设计技术和编码技术制作遵循

10

行业标准且具有良好持续性、一致性的网站

个人应能够：

工作能力●使用CSS或其他的外部文件来对整个网站样式

进行修改

4

●能在两种不同的浏览器(最新、稳定的版本)上

优化页面，获得较好的跨浏览器兼容性

●所创建的网站内容在不同分辨率的屏幕上

要保持一致且结构良好

●对于自适应的页面设计能使用合适的样式和脚

本代码来实现页面

●所创建网站要符合当前的W3C标准(HTML5.0、

CSS3.0)

6

个人需要知道和理解：

●在团队工作中富有效益和实践

●有助于产品可持续性的方案和实践

基本知识

●使用现有工具解决问题和需求

●在多方案中选择合适的方案，正确的时间预估和

分配

个人应能够：10

●考虑功能限时和项目截止日期

●调试和处理错误

●使用计算机设备和软件

工作能力

●根据行业发展，应用和研究新技术及技能

●根据可用时间安排工作计划

●对工作文件进行归档

●使用版本控制系统

总分值100

5

竞赛项目包含网页设计制作、后台模块开发、前端游戏设计，

前端功能实现与交互4个模块的内容，不单独进行理论考试，采

用个人现场独立使用电脑进行设计。

公布《技术工作文件》和比赛试题；裁判长与裁判长助理根

据《技术工作文件》编制试题，赛前公布试题(样题)。赛前根

据普遍反映的问题或合理的意见建议以及结合赛场设备、材料状

况，由裁判长进行最终修正和调整(修订比例一般不超过30%)，

并确定最终考核试题，予以公布。

本项目正式比赛时间为两天，正式比赛时间共计360分钟。

本项目共4个模块，每个模块独立评分，总分为100分。具体的

比赛时间安排如下所示：

A网页设计制作2小时

B后台模块开发1小时

C前端游戏设计2小时

D前端功能实现与交互1小时

合计6小时

每个模块都基于不同的网站设计与开发技能领域，相对其他

模块可独立存在。

6

1.

每位选手根据给定的素材进行创作,作品要求有完善统一的

风格。

模块A的设计稿应该具有原创性，不应和其他选手有相同或

者几乎一致的布局、元素及色调。

网页重构部分须与设计部分保持一致，否则将被扣除相应分

数。

2.

使用规定的编程语言实现网站要求的功能，构建数据库。

提供前端模板，但任何改变或修改的部分需保持原始的UI

风格。

使用jQuery框架或原生js进行页面交互；使用Laravel框

架进行后台开发。

3.

为一家游戏公司，完成一款游戏的页面元素设计和前端页面

制作。选手需要使用有限的素材，对主题有针对性地设计优美的

界面和合理的操作逻辑，并在页面中实现赛题中的需求。

4.

在制作完成的前端页面和设计风格之上，实现游戏功能逻

辑和交互。选手需要在项目中充分体现交互友好性，完成赛题

中对于游戏功能的描述。

7

各模块分值分布，满分为100分。本次评分分两类，评价分

(主观)和测量分(客观)。

A网页设计制作120151025

B后台模块开发6020525

C前端游戏设计12015520

D前端功能实现与交互6025530

总计3607030100

1.分数权重

评价分(主观)

评价分(Judgement)打分方式：5名裁判为一组，各自单独

评分；去掉最高分和最低分，计算出平均权重分，除以3后再乘

以该子项的分值计算出实际得分。裁判相互间分差必须小于等于

1分，否则需要给出确切理由并在裁判长(助理)的监督下进行

调分。

权重表如下：

0分各方面均低于行业标准，包括“未做尝试”

1分达到行业标准

2分达到行业标准，且某些方面超过标准

8

3分达到行业期待的优秀水平

更改现有CSS代码极度困难，CSS代码没有组织结构。

0分

HTML没有格式化

更改现有CSS代码较为困难，较难以定位需要的内容。

1分

HTML有基本格式

更改现有CSS代码比较容易，很方便就能定位需要的内容。

2分

HTML格式良好

在2分基础上，CSS还应用了一定的代码分组技术并至少包含5

3分

条以上有用的注释

测量分(客观)

测量分(Measurement)打分方式：按模块设置若干个评分

组，每组由5名裁判构成。每个组所有裁判一起商议，在对该选

手在该项中的实际得分达成一致后最终只给出一个分值。若裁判

数量较多，也可以另定分组模式。

满分或零分网站地图动态链接至菜单0.500.500

CSS代码能通过验证[每种

从满分中扣除2.002.000–1.5

错误扣0.5分]

CSS代码有注释(0.5分)

从零分开始加1.01.00–0.5

XHTML代码有注释(0.5分)

2.评判方法

9

裁判组：根据组委会审核后的裁判组名单构成。

预期分组与分工方案：

根据裁判推选数量和情况决定，评分项拆分为多个评分小

组，每个评分组由3-5名裁判构成。

3.统分方法

经各组参与裁判员签字确认和裁判长或裁判长助理审核的

评判结果交由工作人员录入竞赛评分系统。四个模块的总和即

为选手的最终竞赛成绩。

4.成绩并列处理

当两名选手总成绩并列时，选手排名顺序按照D模块成绩

先后顺序排序；若D模块成绩依旧相同，依次按照C、A、B顺

序比较模块成绩。

三、竞赛细则

2023年2月24日报到，2月25日为竞赛时间。

日期时间内容

15:00裁判报到，地点：樱花园校区拓新楼1519

15:00-16:00裁判赛前工作会议

参赛选手报到，核实身份(身份证、学生证)，

16:30地点：樱花园校区拓新楼1519

2月24日

16:30-17:00参赛选手赛前说明会

参赛选手熟悉比赛场地，地点：樱花园校区拓新

17:00-17:30楼1521

17:30-18:00裁判赛前检查，封闭赛场

参赛选手集中，进入抽签室，地点：樱花园校区

2月25日08:00

拓新楼1519

13

08:00-08:30裁判开启赛场及竞赛设备

08:00-08:50赛场检录，抽签

08:50-9:00参赛选手进入比赛工位，进行赛前设备检查

比赛时间

09:00-12:00

网页设计制作部分后台开发部分

12:00-12:30收取参赛选手第一场次的比赛结果

12:30-13:20参赛选手就餐，裁判赛场恢复

13:20-13:30参赛选手进入比赛工位，进行赛前设备检查

比赛时间

13:30-16:30

前端游戏设计前端游戏功能实现

16:30-17:00收取参赛选手第二场次的比赛结果

17:00-20:00成绩评定与复核

20:00公布成绩

注意：竞赛前10分钟，监考工作人员发试卷(包括纸质版

和电子版两个版本)。

参赛选手应为2002年1月1日以后出生具有鹤壁户

籍或在鹤壁工作学习满1年以上的人员，可按属地原则报名

参赛。已获得“中华技能大奖”“全国技术能手”的人员

不以选手身份参赛。

13

包括各项目裁判组全体成员。

1.裁判长

裁判长由市组委会技术工作组遴选确定。秉承公平公正原则

做好相应沟通协调、落实竞赛各项技术工作、不参与参赛选手评

判工作。做好本项目裁判员(含裁判长助理)的赛前培训和本项

目赛前技术交流，组织本项目开展赛后技术总结和技术点评。

2.裁判长助理

协助裁判长做好各项竞赛组织实施工作、不参与参赛选手评

判工作。

3.裁判员

裁判员由各代表队择优推荐，每个参赛项目限推荐1名裁判

员。经市组委会技术工作组审核确定后承担裁判员执裁工作。全

部裁判工作均采取回避制度，裁判员不对来自同一参赛队的选手

进行评判。

如裁判员人数不能满足工作需要，由项目裁判长在赛前提出

增加裁判员人选申请，由市组委会技术工作组遴选确定后增补。

服从裁判长工作安排，认真做好本职工作；熟练掌握竞赛技

术规则，参加赛前培训和技术讨论；对有争议的问题提出客观、

公正、合理的意见和建议；公平公正执裁，不徇私舞弊；坚守岗

位，严格遵守执裁时间安排，保证执裁工作正常进行。

4.工作人员

14

包括技术支持人员、录分员及赛务保障人员等。按照大赛统

一要求，在裁判长领导下做好相应的竞赛保障工作。

1.参赛选手须凭身份证和参赛证进入考场。

2.进入赛场前，签署诚信保证书，并将手机、U盘等考场

违禁设备放到指定地点。

3.参赛选手应准时参赛，迟到30分钟以上者，将不得入场，

按自动弃权处理。

4.参赛选手在竞赛期间可饮水、上洗手间，但其耗时一律

计入竞赛时间。

5.监考工作人员发出开始竞赛的时间信号后，参赛选手方

可进行操作。

6.参赛选手不得提前离场。

7.参赛选手必须独立完成所有项目，除征得裁判长许可，

否则严禁与其它选手或本单位裁判员交流接触。

8.竞赛期间，参赛选手遇有问题应向监考工作人员举手示

意，由监考工作人员负责处理。

9.监考工作人员发出结束竞赛的时间信号后，参赛选手应

立即停止操作，依次有序地离开赛场。

1.本项目赛题和配套文件，包括软件环境原则上为英语。

2.存在以下情况者，取消该模块成绩：

15

(1)在提交的作品中带有公司(单位)、个人或组织机构的

标记

(2)携带任何有记录内容的纸张等用品到工位上

(3)赛时间截止时不听从裁判结束比赛口令，经提醒后仍

继续操作电脑

3.存在以下情况者，取消该选手比赛成绩：

(1)考生在比赛过程中将禁止使用的设备带到工位上

(2)在比赛中存在有违诚信道德的事件，经当值裁判记录

并提交裁判长确认

4.如果发生非本人因素引起的软硬件故障且无法立即解决

的，裁判将予以记录并根据处理所花费的时间给予补时。

5.如选手在比赛中存在技术问题的争议，以本技术文件与

赛题规定为准，文件中未涉及的情况由裁判长组织商议决定。

对竞赛期间出现的问题或争议按以下程序解决：

1.竞赛项目内解决。参赛选手、裁判员发现竞赛过程中存在

问题或争议，应向项目裁判长反映。项目裁判长依据相关规定处

理或组织比赛现场裁判员研究解决。处理意见需比赛现场全体裁

判员表决的，须获全体裁判员半数以上通过。最终处理意见应及

时告知意见反映人，并填写《鹤壁市第二届职业技能大赛问题或

争议处理记录表》(以下简称《争议处理记录表》。

16

2.监督仲裁组解决。对项目内处理结果有异议的，在规定时

间内，各参赛队领队可向监督仲裁组出具署名的书面反映材料并

举证。

四、竞赛场地、设施设备等安排

(每一个工位包含)

1开发用主机(或者一体机)台式台1

2显示器(一体机除外)液晶台1

3键盘美式个1

4鼠标三键光电个1

选手比赛用主机配置：

CPUIntelCorei5或者i72.5GHz或以上

内存DDR3或以上8GB或以上

硬盘SATA提供不少于40GB的可用临时硬盘空间

选手比赛用显示器配置：

21英寸或以上1080P广色域250cd/m2VGAHDMIDisplayPort

附表：选手机软件环境(所有软件均为英文版)

17

操作系统Windows10Windows10x64(EN)

AdobePhotoshop2022orupper

Adobe

2022orupper

开发工具Illustrator

AdobeXD2022orupper

XAMPP8.2orupper

MicrosoftEdge109orupper

浏览器Firefox109orupper

Chrome109orupper

MSOffice2021orupper

Postman10.9.0orupper

Editplus5.6orupper

PhpStorm2022.3.1orupper

辅助软件WebStorm2022.3.1orupper

VScode1.74orupper

Sublime4143orupper

Band-Zip7.3orupper

7-Zip22.01(x64)orupper

pixijs7.1orupper

前端框架

jQuery3.6.3orupper

PHP框架Laravel9.xorupper

辅助工具清单

1文件袋60个

18

2签字笔100支

3荧光记号笔100支

4复印纸A4纸5包(包/500张)

5移动硬盘6个

6U盘10个

7投影仪1台

8白板1个

9黑白A4激光打印机2台

10电子计算器8台

11文件袋不干胶封条5套

12便利贴纸2本

13保险柜1个

14收纳箱8个

15便携音箱+话筒1套

16桌子、电脑椅各50张

17排插50个

18移动电视1台

19椅子50把

20文件柜2组

注:1、比赛设备、软件均由承办方统一提供，不允许选手自带软件参

赛和工具(选手自用键盘和鼠标除外，但入场前要经过裁判组的检查方可

带入比赛场地；严禁携带包含存储等功能的智能键盘和鼠标，一经发现并

经裁判组确认，按赛场作弊处理，取消竞赛资格！)。

2、共40个工位，每个工位大小是2000*2000。42台比赛pc计算机，

19

10台评分pc计算机。

20

五、安全、健康要求

为有效预防和及时控制赛场突发事件，确保鹤壁市第二届职

业技能大赛网站设计与开发项目的顺利进行，特制定赛场突发

事件应急预案。

本赛区将建立与行政、交通、司法、公安、消防、卫生、食

品、质检等相关部门的协调机制，制定安全管理的相应规范、流

程和突发事件应急预案，保证比赛筹备和实施全过程的安全。

竞赛过程中，参赛选手须严格遵守安全操作规程及劳动保护

要求，接受裁判员、现场技术服务人员的监督和警示，确保设备

及人身安全。

比赛现场如出现突然非正常停电，按下述步骤进行处理：

(1)裁判人员第一时间启动应急现场扩音设施，要求参赛

选手及观摩人员保持镇静，防止踩踏事件发生。

(2)保卫人员开启安全通道，有序疏散观摩人员离场。

(3)裁判员提示参赛选手在电源保护装置的有效时间内备

份计算机操作数据，等候处理决定。

(4)经向执委会汇报后，启动备用电源或决定延迟比赛。

赛场必须留有安全通道；必须配备灭火设备；赛场应具备良

好的通风、照明和操作空间要求；承办单位要做好大赛安全、健

21

康和公共卫生及突发事件预防与应急处理等工作。

承办单位要设置专门的竞赛后勤保障组，负责竞赛期间健康

和安全事务。主要包括检查竞赛场地、与会人员居住地、车辆交

通及其周围环境的安全防卫；制定紧急应对方案；督导竞赛场地

用电、空调等相关安全问题；监督与会人员食品安全与卫生；分

析和处理安全突发事件等工作。赛场必须配备医护人员和必须的

药品，并备有相应急救设施和救护设备。

为有效预防和及时控制赛场突发事件，确保鹤壁市第二届职

业技能大赛网站设计与开发项目顺利进行，特制定赛场突发事件

应急预案，制定安全管理的相应规范、流程和突发事件应急预

案，保证比赛筹备和实施全过程的安全。

1.竞赛用计算机等竞赛硬件无法正常运行或使用。

赛前预置10台全套竞赛用硬件，并进行相关软件的安装调

试，保证正常运行或使用，同时针对硬件可能出现的情况组织技

术保障团队负责专业硬件维护。参赛选手发现硬件运行问题后，

按下列程序报告并处理：

参赛选手须立即举手示意监考工作人员，记录其故障发生时

22

间。

由现场裁判向裁判长及时反映，通知裁判长来处理，裁判长

会同当值裁判员、场地主任对电脑故障进行确认。

因参赛选手个人原因导致竞赛中断，中断的时间计入参赛选

手竞赛时间，不予补偿；非因参赛选手个人原因造成的竞赛中断，

中断时间不计入参赛选手竞赛时间，并予补足。

竞赛中断的原因由裁判长会同当值裁判员、场地主任做出判

断，并尽快告知参赛选手参赛队裁判员。

2.参赛选手发生意外受伤或急病等情况

参赛选手发生意外受伤或急病等情况，应按下列步骤进行处

理：

现场裁判及时联系赛场医疗人员救治参赛选手，并向裁判长

报告情况。

赛场医疗人员在进行必要的现场处理后，视伤病情况确定现

场救治或送医院进行救治。

3.现场突然非正常停电

比赛现场如出现突然非正常停电，按下述步骤进行处理：

裁判人员第一时间启动应急现场扩音设施，要求参赛选手及

23

观摩人员保持镇静，防止踩踏事件发生。

场地主任开启安全通道，有序疏散观摩人员离场。

经向执委会汇报后，启动备用电源或决定延迟比赛。

4.比赛现场出现暴力、人员拥堵、急性传染病人员进入等情

况，按下述步骤进行处理：

裁判人员迅速向赛项执委会汇报，并由赛项执委会向大赛组

委会汇报，由赛项执委会及大赛组委会根据势态发展情况确定是

否报告公安、公共卫生及医疗部门，在保证赛场内人员人身安全

的原则下，尽量不扩大事态。

根据赛前制订的现场保卫人员的职责范围，保卫人员迅速就

位，对赛场内队参赛选手以外的其他人员进行有序疏散。

人员疏散后进行现场清理，如消毒、找出突发事件隐患并进

行处理等。

进行处理后，在保证参赛选手人身安全的前提下，继续组织比赛。

附件：网站设计与开发(世赛)项目样题

24

附件

(模块A样题)

提交者姓名：

2023年2月

25

阅读下列说明、效果图和HTML代码，进行静态网页开发，填写(1)至(10)代码。

在当今互联网技术高速发展的时代，搜索引擎是用户使用率最高的网络服务工具之一。本

项目为“搜索引擎”网站。

项目名称为Search，包括搜索主页面index.html、第一个标签页tab1.html、第二个标签页

tab2.html和img文件夹，其中，img文件夹包括图片logo.png。

页面布局和内容为：

(1)index.html为搜索主页，分为三部分，自上而下依次是：搜索框、分类标签和搜索

结果。其中，搜索结果使用iframe标签定义，显示tab1.html或tab2.html。

(2)tab1.html为搜索结果页，是“标签页1-网页”的搜索结果，第一部分是搜索结果列

表，第二部分是分页页码。其中，使用2个table进行布局。

(3)tab2.html为搜索结果页，是“标签页2-资讯”的搜索结果，第一部分是搜索结果列

表，第二部分是分页页码。其中，使用1个table进行布局。

选择不同的类别标签，会显示该类别下的搜索结果。

(1)打开index.html效果如图1所示。

1-1

(2)点击“标签页2-资讯”，搜索结果显示为tab2.html，效果如图2所示。

32

1-2

index.html

<!(1)html><!--文档声明-->

<html>

<head>

<metacontent="text/html;"(2)="utf-8"><!--文档字符编码为utf-8-->S

<title>搜索</title><!--设置文档标题为“搜索”-->

<style>

.search_val{width:400px;margin-bottom:20px;}/*设置搜索框为400px，底部外

边距为20px*/

a{margin-right:20px}/*设置a链接的右边距为20px*/

</style>

</head>

<body>

<form(3)="index.html"method="get">

<inputtype="text"class="search_val">

<inputtype="(4)"value="搜索"/><!--提交按钮-->

</form>

<table><!--在iframe框架中打开被链接文档tab1.html或tab2.html-->

<tr><td><ahref="tab1.html"(5)>标签页1-网页</a></td>

<td><ahref="tab2.html"(5)>标签页2-资讯</a></td></tr>

</table>

<hr/>

<!--tab1.html显示在iframe中-->

<iframename="main"id="main"(6)width="500px"height="280px"

frameborder="0"></iframe>

</body>

</html>

tab1.html

<!DOCTYPEhtml>

<html>

<head>

<metacontent="text/html;"charset="utf-8">

32

<title>搜索</title>

<style>

body{font-size:13px;}/*设置页面字体大小为13px*/

p{width:380px;}/*设置p元素的宽度为380px*/

p,h3{margin:0;padding:0;}/*设置内边距和外边距均为0*/

.noPic{width:460px;}/*设置类名为noPic的元素的宽度为460px*/

img{padding:10px;}/*设置图片的内边距为10px*/

</style>

</head>

<body>

<tableborder="0"width="290px"><!--设置无边框表格-->

<tr><td>

<table>

<tr><td(7)><!--合并两列-->

(8)<!--设置标题“HTML”为三号标题-->

</td></tr>

<tr><tdrowspan="2">

<!--插入img文件夹下的logo.png图片-->

<img(9)width="40px"></td>

<td><p>超文本标记语言，标准通用标记语言下的一个应用。“超

文本”就是指页面内可以包含图片、链接等...</p>

</td></tr>

<tr><td><ahref="#">http://HTML.com</a></td></tr>

</table>

</td></tr>

<tr><tdcolspan="2">

<h3>HTMLStandard</h3>

<pclass="noPic">1.2IsthisHTML5?Thissectionisnon-normative.Inshort:

Yes.Inmorelength:theterm"HTML5"iswidelyusedasabuzzwordtorefer...</p>

<ahref="#">http://HTMLS</a>

</td></tr>

</table>

<ahref="#">1</a><ahref="#">2</a><ahref="#">3</a><ahref="#">4</a>

</body>

</html>

tab2.html

<!DOCTYPEhtml>

<html>

<head>

<metacontent="text/html;"charset="utf-8">

<title>搜索</title>

<style>

body{font-size:13px;}/*设置页面字体大小为13px*/

td{padding:10px;}/*设置td单元格的内边距为10px*/

p{width:450px;}/*设置p元素的宽度为450px*/

p,h3{(10)}/*设置内边距和外边距均为0*/

</style>

</head>

<body>

<tableborder="0"width="290px">

<tr><td><h3>实现实时Html编辑器</h3>

<p>给大家介绍一种很简单的无限制在线Html编辑器,实现所写即所得UI和样式实

时刷新,JS代码也能进行热加载执行重新渲染,而且这些实现都非常简单...</p>

<ahref="#">http://HTML.com</a></td></tr>

32

<tr><td><h3>html中q标签(短的引用)的详细介绍</h3>

<p>本篇将介绍html中q标签(短的引用)的详细用法,有兴趣的朋友可以了解一下!

学习html其实就是学习标签的用法,今天小编要介绍的是...</p>

<ahref="#">http://HTMLS</a></td></tr>

</table>

<ahref="#">1</a><ahref="#">2</a><ahref="#">3</a><ahref="#">4</a>

</body>

</html>

进行静态网页开发，补全代码，在(1)至(10)处填入正确的内容。

阅读下列说明、效果图、HTML代码和CSS代码，开发网页动态页面样式，填写(1)至

(15)代码。

这是“Web技术社区”网站，该网站致力于推广和分享各种前端技术，如HTML、CSS、

JavaScript和jQuery，现在我们需要编写该网站首页样式。

项目名称为web_skill，包含首页index.html、css文件夹和img文件夹，其中，css文件夹

包含index.css文件，img文件夹包含html.png、css.png、js.png和jquery.png图片。

首页(index.html)内容分为两部分，一是【网站介绍】，位于页面上端，内容为【欢迎语】

和【网站内容介绍】，以文字的形式展示；二是【技术介绍】，位于页面下端，展示四项【技

术】，每项都包括【技术logo】和【技术特点】，以图片和列表的形式展示。

对页面样式进行设计，要求为：

(1)页面全局样式：设置页面全局属性，页面外边距和内边距为“0”，字体为“宋体”，

字体大小为“35px”。为页面设置透明度动画，在页面加载时执行，透明度从“0”到“1”，动

画持续时间为“1s”，动画次数为“1”次。

(2)【网站介绍】样式：为页面上端【网站介绍】部分添加背景颜色“#000000”，并设置

宽度为“100%”、高度为“400px”、字体颜色为“#FFFFFF”。另外，为【欢迎语】和【网站

内容介绍】内容设置“绝对布局”、距顶部边缘“16%”、距左边缘“16%”、宽度为“68%”、

文本内容“居中”。

(3)【技术介绍】样式：为页面下端【技术介绍】设置“弹性布局”、文本内容“居中”。

另外，为【技术】设置宽度为“17%”、外边距为“4%”；为【技术logo】设置高度为

“200px”、宽度为“200px”、边框颜色为“#000000”、边框为“1px、实线”、边框设置“20px

圆角”；为【技术特点】中列表设置文本内容“居左”。

32

2-1

index.html

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"

"/TR/html4/loose.dtd">

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<title>Web技术社区</title>

<linkrel="stylesheet"type="text/css"href="(1)"/>

</head>

<body>

<divid="introduction">

<divid="content">

<h2>欢迎来到XX网</h2><br/>

<p>本站包括了HTML、CSS、Javascript、jQuery等各种基础编程教程。</p>

<p>本站致力于推广各种前端技术，所有资源...</p>

</div>

</div><br/><br/>

<divid="(2)">

<!--第一张图片和列表-->

<divclass="card">

<imgsrc="img/html.png"alt="这是第一张图片"/><br/><br/>

<ul>

<li>HTML指的是超文本标记语言</li>

/*...省略其它li，参见【效果图】内容*/

</ul>

</div>

<!--第二张图片和列表-->

<divclass="card">

32

<imgsrc="img/css.png"alt="这是第二张图片"/><br/><br/>

<ul>

<li>CSS指层叠样式表</li>

/*...省略其它li，参见【效果图】内容*/

</ul>

</div>

<!--第三张图片和列表-->

<divclass="card">

<imgsrc="img/js.png"alt="这是第三张图片"/><br/><br/>

<ul>

<li>JavaScript是一种轻量级的编程语言</li>

/*...省略其它li，参见【效果图】内容*/

</ul>

</div>

<!--第四张图片和列表-->

<divclass="card">

<imgsrc="img/jquery.png"alt="这是第四张图片"/><br/><br/>

<ul>

<li>jQuery是一个JavaScript函数库</li>

/*...省略其它li，参见【效果图】内容*/

</ul>

</div>

</div>

</body>

</html>

CSSindex.css

(3){

margin:0;

(4);/*内边距*/

(5);/*字体*/

font-size:35px;

}

body{

animation-name:fadeIn;

(6);

animation-iteration-count:1;

}

(7)fadeIn{

from{opacity:0;}

to{opacity:1;}

}

#introduction{

(8);/*背景颜色*/

width:100%;

height:400px;

(9);/*字体颜色*/

}

#content{

(10);/*绝对布局*/

(11);/*顶部边距*/

left:16%;

width:68%;

text-align:center;

}

#main{

32

(12);

text-align:center;

}

#mainimg{

(13);

border-radius:20px;

height:200px;

width:200px;

}

.card{

width:17%;

margin:4%;

}

(14){/*列表样式，以class加子元素选择器的方式填写*/

(15);

}

【】

开发网页动态页面样式，补全代码，在(1)至(15)处填入正确的内容。

32

附件

(模块B样题)

提交者姓名：

2023年2月

32

1.INTRODUCTION:

Anewairlinecalled“airx”needtodevelopawebsitetosupporttheironlineservice,

suchasflightinfosearch,ticketpurchaseandcheck-in.Youareaskedtoaccomplish

aprototype(Usespecifiedphpframeworktogeneratecoderapidly)ofthiswebsite

accordingtotheforegoingrequirementanalysisinordertoverifythesefunctional

requirementandthebusinesslogic.

2.DESCRIPTIONOFPROJECTANDMODULE

AirxBusinessLogic

Basicrequirement

Displayhomepagewhenvisitrootdirectory.

Providedtemplatehasbeenused.Anychanged/modifiedpartwillkeepthe

originalUIstyle

UseLaravalframework

Businessprocess

Search

Noneedtologinwhenusingthesearchfunction.

令Departurecityanddestinationaremandatoryandcannotbethesame.

Provideerrorhintsiftheinputisnotcorrect.

Aftersearching,flightinformation(flightnumber,aircraftmodel,

departuretime,departurecityanddestination)willbedisplayed

correctlyandcompletelyinsearchresultpage.

33

Dateandcabinettypearenotmandatory.Noinputreferstoanydate/

cabintype.

Iftheflighthasstopsellingthetickets(onehourpriortothedeparturetime),

thisflightwon’tbeshowninthelist

Iftheuserdefinedthespecificcabintypeduringsearch,thesearchresultwill

onlylisttheflightwiththiscabintype.Thecabintypeisautomaticallychosen

(accordingtouser’sdefinition)inthesearchresult,anduserscouldstillclick

tochangetoothercabintypes.

Ifthespecificcabintypehasnoavailableseatsinthesearchresult,

userscannotpurchasetheticketwiththiscabintype.(theflightinfo

couldbedisplayedinthesearchresultbutitwillprovidehintsofsoldout

whenuserclick)

34

ClickBUYNowandthenturntoticketpurchasepage.Iftheuserdidn’t

choosecabintype,itshouldprovideproperhintofchoosingthecabintype

first

Provideproperhintifthereisnoavailableflightinthesearch.

Purchase

PurchaseTickets

令Logged-inusercouldgotopurchasepagebyclickingBUYNOWinthe

searchpage.Correlationinformationshouldbecorrect(flightinformation,

cabintypeetc.)

令Unlogged-inuserwillgotologinpagefirstandthenturntopurchase