• 首页
• 在线设计
• 列表
• 正文

Web前端设计实验项目

2021-12-09 18:43:51

100 296

2、通过不同样式的列表设计新闻条目、制度宣传展板和饭店菜单价目表。

3、运用超链接、图像、音视视频、背景音乐等标记设计简易灯箱画廊、媒体播放、简易网站导航、新生课表简介

实验二：DIV+CSS综合运用

1、运用CSS样式属性和样式定义设计《中国教育网络》杂志和《京东商品导购》页面。

2、通过CSSBox的margin、border、padding、content这4个属性，设计常规页面布局和《2015年CERNET华东北地区年会》网站

实验三：表格与表单页面设计

1、利用表格对网页进行合理布局，设计《网络主题研讨会》日程表和简化版《江苏教育电子政务网》。

实验四：JavaScript应用（二级菜单的制作）

1.理解JavaScript脚本放置与运行的方法。

2.掌握JavaScript基本构成和基础语法。

3.掌握自定义函数定义与引用。

掌握JavaScript基础、标识符、变量、运算符与表达式的定义，熟练使用消息对话框和自定义函数（如sum(n1,n2)）编写简易JavaScript程序。学会使用系统内部函数。

利用事件编程实现校园办公系统认证页面、鼠标动作捕获与响应，学会绑定事件处理程序。

实验五：DOM与BOM应用案例（产生随机数）

实验六HTML5高级应用案例（1）

2、HTML5Canvas开发一个小游戏。

3、使用WebWorker做后台数值(算法)计算

4、利用DOM技术编程实现简易福利彩票投注程序和江苏福彩投注站彩票投注助手。

实验一：网页的基础代码练习9月26日

一、实验目的与要求

1.掌握图像排列操作。

2.学会文字排列。

3.掌握段落排列。

二、实验内容

.制作基础网页

三、实验器材

微机+windows操作系统+HB

四、实验步骤

分析效果图

在图2-11中既有图像又有文字，并且图像居左文字居右排列，图像和文字之间有一定的距离。同时文字由标题和段落文本组成，它们的字体和字号不同。在段落文本中还有一些文字以特殊的颜色加以突出显示，同时每个段落前都有一定的留白。

通过上面的分析，可以知道在页面中需要使用标记插入图像，同时使用

标记和

标记分别设置标题和段落文本。接下来对标记应用align属性和hspace属性实现图像居左文字居右、且图像和文字之间有一定距离的排列效果。为了控制标题和段落文本的样式还需要使用文本样式标记，最后在每个段落前使用空格符“”实现留白效果。

制作页面结构

根据上面的分析，使用相应的HTML标记来搭建网页结构，如【example03】所示。

【example03】

1

4

6

7

8

9

10

传智播客设计学院-设计师的摇篮

11

传智播客设计学院成立于2010年，专注于平面设计师、网页设计师、UI设计师的培养。我们拥有专业的师资团队，清晰合理的课程架构，4个月的学习循序渐进、充实饱满，从最基础的设计软件Photoshop和Illustrator开始学起，通过基础美术学习透视和光影关系，课程中结合大量的案例和实战项目，4个月的学习相当于两年工作经验。

12

传智播客设计学院教给你的远远不止如何作图，在这里你将学到真正的设计素养和理念，毕业之后，你将成为平面、网页、UI设计都精通的全能设计师。

13

迄今为止，传智播客设计学院已经培养出了上万名设计师，遍布于各个大中型企业，同时，从传智播客走出去的学员也得到了各个企业的一致认可和好评。

14

15

在【example03】中，使用标记插入图像，同时通过

标记和

标记分别定义标题和段落文本。

运行【example03】，效果如图所示。

HTML结构页面

控制图像

在图2-28所示的页面中，文字位于图像下方。要想实现图2-11所示，图像居左文字居右，并且图像和文字之间有一定距离的排列效果，就需要使用图像的对齐属性align和水平边距属性hspace。

接下来，对【example03】中的图像加以控制，将第9行代码更改如下：

保存HTML文件，刷新网页，效果如图2-30所示。

控制文本

通过对图像进行控制，实现了图像居左文字居右的效果。要想实现图2-12所示，段落中的某些文字以特殊的颜色突出显示、标题和段落文本的字体和字号不同，可以使用文本样式标记。同时通过空格符“”可实现段落前的留白效果。

接下来，对文本加以控制，具体代码如下：

16

19

21

22

23

24

25

传智播客设计学院

26

27

28传智播客设计学院成立于2010年，专注于平面设计师、网页设计师、UI设计师的培养。我们拥有专业的师资团队，清晰合理的课程架构，4个月的学习循序渐进、充实饱满，从最基础的设计软件Photoshop和Illustrator开始学起，通过基础美术学习透视和光影关系，课程中结合大量的案例和实战项目，4个月的学习相当于两年工作经验。

29

30

31

32

33传智播客设计学院教给你的远远不止如何作图，在这里你将学到真正的设计素养和理念，毕业之后，你将成为平面、网页、UI设计都精通的全能设计师。

34

35

36

37

38;迄今为止传智播客设计学院已经培养出了上万名设计师，遍布于各个大中型企业，同时，从传智播客走出去的学员也得到了各个企业的一致认可和好评。

39

40

41

42

这时，保存【example03】文件，刷新【example03】所在的页面，效果如图所示。

图控制文本

实验目的与要求

（1）给外面的盒子设置宽度、高度、背景图像等样式。需要注意的是，背景图像需要设置为沿着水平方向平铺。

（2）给里面的盒子设置宽度、高度、背景图像样式。需要注意的是，背景图像需要设置为不平铺，且距离外面盒子的左边和上边都有一定的距离。

给外面的盒子设置宽度、高度、背景图像等样式。需要注意的是，背景图像需要设置为沿着水平方向平铺。

给里面的盒子设置宽度、高度、背景图像样式。需要注意的是，背景图像需要设置为不平铺，且距离外面盒子的左边和上边都有一定的距离。

.构建基础网页

结构分析

图4-19所示的“咖啡店banner”可以使用内外嵌套的两个盒子(div)来定义，结构如图4-29所示。

样式分析

控制效果图4-19的样式主要分为2个部分：

根据上面的分析，使用相应的HTML标记来搭建网页结构，如【example09】所示。

【example09】

运行【example09】，此时页面中将不显示任何元素。

定义CSS样式

搭建完页面的结构后，接下来使用CSS对页面的样式进行修饰。本节采用从整体到局部的方式实现图4-19所示的效果，具体如下：

定义基础样式

/*将页面中所有元素的内外边距设置为0*/

*{padding:0;margin:0;}

控制外层盒子

.outer{/*设置外面盒子的样式*/

width:900px;

height:344px;

margin:50pxauto;

background:url(images/bg.png)repeat-x;

}

在上面的代码中，第5行代码“background:url(images/bg.png)repeat-x;”用于给外层的盒子添加水平平铺的背景图像。

控制内层盒子

.inner{/*设置里面盒子的样式*/

background:url(images/coffee.png)no-repeatcenter30px;

在上面的代码中，第4行代码“background:url(images/coffee.png)no-repeatcenter30px;”用于给内层盒子添加不平铺的背景图像，该背景图像在外层盒子垂直居中、且距离外层盒子的左边缘30px。

至此，完成图4-19所示“咖啡店banner”的CSS样式部分。刷新【example09】所在的页面，效果如图4-30所示。

CSS控制“咖啡店banner”效果

【实验目的】

2、掌握框架集的基本语法，利用rows、cols属性设置水平和垂直分割窗口

3、掌握嵌套框架分割窗口的方法；

4、掌握浮动框架基本语法，学会在Web页面中嵌入浮动框架；

5、学会使用frame、iframe作为超链接的目标，并利用框架结构进行简单页面布局设计。

【实验内容】

1、使用表格和表格属性制作简易表格；

2、美化表格；

3、使用框架集和框架属性实现页面布局；

4、使用浮动框架实现内联网页布局效果。

5、使用表单制作留言板设计

【实验步骤】

一、使用表格和表格属性制作简易表格

使用表格标记和属性设计“第一学期成绩表”，如图6.1所示。

图6.1表格设计

1．新建HTML网页；

6．设置单元格跨行跨列属性：rowspan属性设置单元格跨行，colspan设置单元格跨列；

行、单元格样式在head标记中设置内部样式表，参考代码：

tr{width:500px;text-align:center;vertical-align:middle;height:20px;}

td{font-weight:bold}

表格参考代码：

表1第一学期成绩表

序号

学号

姓名

第一学期成绩

英语

高数

学科导论

就业

总分

1

1019200101

李大宇

75

76

90

395

……

课程平均分

58.2

74.2

69.6

72

二、美化表格

对上题设计的表格进行美化，效果如图6.2所示。设置表格背景图片为sy6/tu.jpg，背景色为#99ff00，边框颜色绿色，内部边框只显示水平边框、垂直边框不显示，表头和表尾文本变成蓝色，不及格的课程分数变成红色（提示：文本颜色通过设计和应用样式实现）。写出实现这些效果的关键代码。

三、使用框架集和框架属性实现页面布局

1．设计页面布局：采用典型的“厂”字型布局实现简易网站后台管理页面布局，如图6.4所示。框架集中的主程序文件为sy6-4.html；框架集被分割为4个框架，顶部页面top.html，中间左边页面left.html，中间右边页面news.html，底部页面bottom.html。（注：框架中的页面请根据效果自行设计，或从素材中下载）

图6.4网站后台管理系统页面布局

2．新建HTML文档；

3．采用框架结构进行布局：使用framset的rows属性将页面水平分割在上、中、下3部分，然后对

中间框架进行嵌套垂直分割成左右两个子框架；（注意：frameset不能包含在body标记中）

4．分别设置每个框架的name属性、src属性。其代码如下：

5．浏览网页效果，如图6.5所示。

图6.5框架网页效果

四、使用浮动框架实现内联网页布局效果

1．打开sy6/sy6-5-1.html；

2．在表格中间背景色为白色的单元格（第3行2列）中定义浮动框架，代码如下；

3．浏览网页效果，如图6.6所示。

图6.6浮动框架

五、留言板设计

用表格、表单和表单元素设计“留言板”页面，如图7.1所示

1．新建HTML文档；

2．分别定义两个图层、标题字、单元格的样式（可参照以下代码）；

/*第1图层样式*/

#div1{background-color:#f2f9fd;color:##66ffff;width:100%;height:30px;}

/*第2图层样式*/

#div2{background-color:#f2f9fd;color:##66ffff;width:100%;height:300px;margin-top:3px;}

/*单元格1样式*/

.td1{line-height:22px;font-size:18px;color:#339966;width:100px;font-weight:bold;}

/*单元格2样式*/

.td2{line-height:42px;font-size:18px;color:#339966;width:100px;font-weight:bold;}

/*标题1样式*/

.bt1{font-size:30px;font;family:黑体;font-weight:bold;text-align:left;width:500;color:#0033cc;}

/*标题2样式*/

.bt2{font-size:22px;font-family:黑体;font-weight:bold;text-align:left;width:200;color:#0033cc;}

3．在body标记中插入两个图层，并应用相应的样式；

4．在第1个图层中插入1行2列表格，在单元格中分别插入标题字；

5．在第2个图层中插入表单，在表单中再插入表格，在单元格中插入表单元素；

6．精心调试，合理布局，按如图所示的效果完成页面设计。

通过JavaScript实现限时秒杀效果的思路如下：

利用JS设置限时秒杀

观察图9-1、图9-2容易看出该“限时秒杀”页面主要由背景图片和秒杀计时两部分组成。其中，背景图片可以通过对外层div添加背景来设置，秒杀计时部分通过三个span标记进行定义。由于秒杀结束后，会有一个提示语，还需要在span标记之后定义一个div（默认隐藏）。效果图9-1、9-2对应的结构如图9-10所示。

图3-10“限时秒杀”结构分析

实现效果图9-1和9-2所示样式的思路如下：

根据上面的分析，使用相应的HTML标记来搭建网页结构，如【example26】所示。

【example26】

3

5

6

7

9

10

11

12

13

由于在结构中没有任何内容，此时保存并运行【example26】，页面中不会显示任何效果。

（1）.定义基础样式

首先定义页面的统一样式，CSS代码如下：

/*全局控制*/

body{font-size:20px;color:#fff;font-family:microsoftyahei,arial;}

/*清除浏览器默认样式*/

img{list-style:none;outline:none;}

（2）.设置限时秒杀样式

.img-box{

position:relative;

background:url(images/flash_sale.png);

width:702px;

height:378px;

margin:0auto;

.img-boxspan{

text-align:center;

line-height:26px;

margin:4px003px;

.img-box#hour{

left:50.6%;

top:68.35%

.img-box#munite{

left:55.2%;

top:68.35%;

.img-box#second{

left:59.6%;

（3）.设置秒杀结束样式

#bot-box{

position:absolute;

z-index:1;

top:250px;

display:none;

height:51px;

line-height:40px;

color:#666;

font-size:28px;

至此，完成图9-1所示电商网站限时秒杀的CSS样式部分。刷新【example26】所在的页面，效果如图9-11所示。

图3-11CSS样式效果

图3-12JavaScript秒杀计时效果

实验五：DOM与BOM应用案例（产生随机数）11月23日

1、理解DOM树结构和节点的概念，掌握利用DOM动态创建和删除页面元素的方法；

2、了解BOM结构，学会利用window对象进行简单交互式编程。

1、设计一个页面，显示当前文档的标题、URL、背景色、最后修改日期、包含的超链接个数以及图像的个数；使用all属性访问当前HTML文档中的所有标记。

2、设计一个简单彩票投注助手程序，页面效果如图11.1所示。功能要求：

（1）单击“投注”按钮，在左边文本框中产生一注彩票号码；

（2）单击“清空”按钮，将所有文本框内容清空；

（3）福利彩票号码由6个号码，外加1个特别号，共7个号码组成，号码范围为[01，30]之间的任意一个整数；

（4）采用图层布局，设置图层的属性。

图11.1彩票投注程序1

3、拓展第2题要求，设计一个投注数可选的彩票投注程序，页面效果如图11.2所示。功能要求：

（1）采用表格和表单进行布局；

（2）单击“机选1注”按钮1次，就将1注的号码形成字符串添加到右边的列表框中，并将每次产生的第一行号码作为预选项，高亮度显示；

（3）单击“机选5注”按钮1次，就将5注的号码形成字符串添加到右边的列表框中，并将每次产生的第一行号码作为预选项，高亮度显示；

（4）单击“机选10注”按钮1次，就将10注的号码形成字符串添加到右边的列表框中，并将每次产生的第一行号码作为预选项，高亮度显示；

（5）单击“删除”按钮1次，就将列表框中选中的列表项删除，如果列表框无列表项可删，则用告警消息框提示出错信息；

（6）单击“全部删除”按钮，就将列表框中的所有列表项删除，如果列表框无列表项可删，则用告警消息框提示出错信息。

图11.2彩票投注程序2

4、使用window对象的定时器方法实现状态栏移动。如图11.3所示，当用户鼠标单击“开始状态栏滚动”按钮，信息条在状态栏相应区域来回移动；单击“停止状态栏滚动”按钮，信息条停止移动并显示“状态栏停止移动”。

图11.3状态态移动

一、使用document对象的属性和方法

1．新建HTML框架；

document.write("当前文档的标题:"+document.title+"
");

document.write("当前文档的URL:"+document.URL+"
");

document.write("当前文档的背景色:"+document.bgColor+"
");

document.write("当前文档的最后修改日期:"+document.lastModified+"
");

document.write("当前文档包含"+document.links.length+"个超链接
");

document.write("当前文档包含"+document.images.length+"个图像
");

3．document对象的all属性可以访问文档中的所有元素对象；

vari,cell;

for(i=0;i

cell=document.all[i];

if(i>0){

document.write(",");

document.write(cell.tagName);

二、彩票投注助手1

1．建立HTML文档框架；

2．参照图11.1进行页面布局和设计，参考样式代码如下；

div{background:#009933;width:400px;height:300px;margin:0pxauto;border:2pxdotted#ff3300;color:white;}

form{margin:0auto;}

table{margin:0auto;font-weight:bold;}

h2{font-size:28px;text-align:center;}

3．给表单元素指定事件处理程序；

4．完成代码编写。

functionselectnumber(num){

//彩票选号助手

varnumber=newArray();

for(i=0;i<=6;i++){

number[i]=Math.floor(Math.random()*30+1);//下舍入

document.getElementById(num).innerText=number.join("");//将数组元素数连接为字符串，中间用空格连接，作为1注彩票号码，写入文本框

三、彩票投注助手2

2．参照图11.2进行页面布局和设计；

functionselectNumber(n){

varobjsel=document.getElementById("number1");

varselnum=objsel.options.length;//保存选项添加前总数

for(j=0;j<=n-1;j++){

varlist="";

//随机产生7个01~30之间的整数

if(number[i]<10){number[i]="0"+number[i];}

list=number.join("");

//写入到列表框中

varopt=document.createElement("option");//创建一个列表项option

varopt_text=document.createTextNode(list);//创建一个文本节点

opt.value=j;

opt.appendChild(opt_text);//将新的列表项节点加入DOM树

objsel.appendChild(opt);//将新文本节点加入DOM树

//始终将新添加的第一个列表项作为预选项

objsel.selectedIndex=selnum;

functiondelSelect(){

varobjSelect=document.getElementById("number1");

varstrIndex=objSelect.selectedIndex;

if(strIndex!=-1){objSelect.options.remove(strIndex);

}else{alert("请先选择列表项后再删除！");}

functiondelSelectAll(){

varstrIndex=objSelect.options.length;

if(strIndex>0){

for(i=0;i<=strIndex-1;i++)

{objSelect.options.remove(0);}

四、使用window对象的定时器方法实现状态栏移动

2．参照图11.3进行页面布局和设计；

varTimerID;

vardir=1;//用于控制移动的方向

varstr_num=0;

//用于动态显示的目标字符串

varstr="欢迎来到javascript世界!";

//设定动态显示的状态栏信息

functionstartStatus(){

varstr_space="";

str_num=str_num+1*dir;

if(str_num>30||str_num<0){//移动范围0~30个字符

dir=-1*dir;

for(vari=0;i

str_space+="";

window.status=str_space+str;//写入window的状态栏

//状态栏滚动开始

functionMyStart(){

TimerID=setInterval("startStatus();",100);//每间隔100毫秒执行1次startStatus()

//状态栏滚动结束，并更新状态栏

functionMyStop(){

clearInterval(TimerID);//清除定时器

window.status="状态栏移动结束!";

【自主实验】

1、实现如图11.4所示的员工选择页面，完成下列功能：

（1）单击“选择部门”下拉列表框时，在左侧多选列表框中列出本部门的员工名单；

（2）单击“”按钮时，将左侧列表框中选中的元素添加到右侧多选列表框中，同时将这些元素从左侧框中删除；

（3）单击“”按钮时，将左侧框中的所有元素添加到右侧框中，同时将这些元素从左侧框中删除；

（4）单击“”按钮时，将右侧列表框中选中的元素添加到左侧多选列表框中，同时将这些元素从右侧框中删除；

”按钮时，将左侧框中的所有元素添加到右侧框中，同时将这些元素从左侧框中删除；

（5）单击“”按钮时，将右侧框中的所有元素添加到左侧框中，同时将这些元素从右侧框中删除；

图11.4员工选择页面

2、创建如图11.5所示的即时网页时钟。

图11.5即时网页时钟

3、在网页上实现如图11.6所示的中文小月历，要求当天用红底显示。

图11.6中文小月历

【实验思考】

1、什么是document对象？如何获取文档对象上的元素？

2、什么是DOM？一个最基本的DOM树通常由哪3种类型的节点组成？

3、document对象包含一些创建和修改节点的方法，创建一个元素节点为的方法是？删除一个子节点

的方法是？添加一个子节点的方法是？

4、document对象怎么获取节点内容？

5、什么是BOM？它包含哪些对象？最顶层的对象是？

6、简述window对象有哪些常用的属性和方法。

一、实验目的与要求：

1、HTML5Canvas开发一个小游戏。

二、实验内容：

1、五子棋游戏

三、实验器材：

微机+windows操作系统+Editplus

四、实验步骤：

五子棋游戏

棋牌棋子实现原理

画棋盘：

整个棋盘长宽为分别450px，每行14个棋子，每个棋子30px,左右、上下留白15px;

15条线，运行15次，左右、上下留白15px相当于画笔的第一个起始坐标为（15，15);

画横线时：x轴起点位置15，终点位置435，y轴不断增加30px;

画竖线时：y轴起点位置15，终点位置435，x轴不断增加30px;

设置水印：

创建image对象

将image对象存储到浏览器对象

使用drawImage设置图像的长宽，以及图像在棋盘的起始位置

使用图像的onload事件等图像加载完毕，开始执行drawImage以及棋盘的绘制，防止水印图片遮挡住棋盘位置

绘制棋子：

首先画圆，开启一个路径

使用arc开始画圆

关闭路径

设置渐变

棋子落地：

给棋盘绑定点击事件

根据坐标索引来确定落地的棋子位置

定义一个数组防止一个位置同时落黑白两种棋子并进行存储

AI实现原理：

走对自己获得胜利最有利的点。

堵对对方获得胜利最有利的点。

二、代码实现

1.Html代码实现：

2.

3.

4.

5.

6.

7.

8.

9.

10.

13.

14.

15.

17.

18.

19.

20.

21.js代码实现：

22.window.onload=function(){

23.//获取canvas元素

25.//引用画布对象

27.//设置图形轮廓的颜色

29.//赢法统计数组

30.varpeople=[];//人

31.varcomputer=[];//机器

32.vark=true;

33.varover=false;

34.vararry=[];

35.//防止一个位置同时落黑白两种棋子并进行存储

36.for(vari=0;i<15;i++){

37.arry[i]=[];

38.for(varj=0;j<15;j++){

39.arry[i][j]=0;

40.}

41.}

42.//所有赢法种类

43.varwin=[];

44.for(vari=0;i<15;i++){

45.win[i]=[];

46.for(varj=0;j<15;j++){

47.win[i][j]=[];

48.}

49.}

50.//初始化赢法种类

51.varcount=0;

52.//所有横线赢法种类

53.for(vari=0;i<15;i++){

54.for(varj=0;j<11;j++){

55.for(varm=0;m<5;m++){

56.win[i][j+m][count]=true;

57.}

58.count++;

59.}

60.}

61.//所有竖线赢法种类

62.for(vari=0;i<15;i++){

63.for(varj=0;j<11;j++){

64.for(varm=0;m<5;m++){

65.win[j+m][i][count]=true;

66.}

67.count++;

68.}

69.}

70.//所有的斜线赢法种类

71.for(vari=0;i<11;i++){

72.for(varj=0;j<11;j++){

73.for(varm=0;m<5;m++){

74.win[i+m][j+m][count]=true;

75.}

76.count++;

77.}

78.}

79.//所有的反斜线赢法种类

80.for(vari=0;i<11;i++){

81.for(varj=14;j>3;j--){

82.for(varm=0;m<5;m++){

83.win[i+m][j-m][count]=true;

84.}

85.count++;

86.}

87.}

88.console.log(count);

89.for(vari=0;i

90.people[i]=0;

91.computer[i]=0;

92.}

93.//创建image对象

94.varlogo=newImage();

95.//定义image对象

97.//图像对象事件(当图片被加载完成后触发)

98.logo.onload=function(){

99.//drawImage(绘制的图像，绘制的图像左上角坐标，宽，高)

100.context.drawImage(logo,0,0,450,450);

101.ch();

102.//step(0,0,true);

103.//step(1,1,false);

104.//step(5,5,true);

105.}

106.varch=function(){

107.for(i=0;i<15;i++){

108.//画笔移动到指定坐标,路径的起使坐标

109.//context.moveTo(0,0);

110.context.moveTo(15+i*30,15);

111.//绘制一条从当前位置到指定坐标的直线

112.//context.lineTo(450,450);

113.context.lineTo(15+i*30,435);

114.//通过图形绘制图形轮廓

115.context.stroke();//竖线

116.context.moveTo(15,15+i*30);

117.context.lineTo(435,15+i*30);

118.context.stroke();//横线

119.}

120.}

121.//step(0,0,true);

122.varstep=function(i,j,k){

123.//开始路径

124.context.beginPath();

125.//arc绘制圆弧(圆心坐标，半径，开始弧度，结束弧度)

126.context.arc(15+i*30,15+j*30,13,0,Math.PI*2);

127.//结束路径

128.context.closePath();

129.//描边

130.//context.stroke();

131.//设置渐变，返回一个渐变对象（前3个为外圆心的圆心及半径，后3个为内圆心的坐标及半径）

132.varbecome=context.createRadialGradient(15+i*30+2,15+j*30-2,13,15+i*30+2,15+j*30-2,0);