实验课程一HTML标记
一、实验目的与要求
1.掌握图像排列操作。
2.学会文字排列。
3.掌握段落排列。
二、实验内容
.制作基础网页
三、实验器材
微机+windows操作系统+HB
四、实验步骤
分析效果图
在图2-11中既有图像又有文字，并且图像居左文字居右排列，图像和文字之间有一定的距离。同时文字由标题和段落文本组成，它们的字体和字号不同。在段落文本中还有一些文字以特殊的颜色加以突出显示，同时每个段落前都有一定的留白。
通过上面的分析，可以知道在页面中需要使用<img />标记插入图像，同时使用<h2>标记和<p>标记分别设置标题和段落文本。接下来对<img />标记应用align属性和hspace属性实现图像居左文字居右、且图像和文字之间有一定距离的排列效果。为了控制标题和段落文本的样式还需要使用文本样式标记<font>，最后在每个段落前使用空格符“ ”实现留白效果。
制作页面结构
根据上面的分析，使用相应的HTML标记来搭建网页结构，如【example03】所示。
【example03】
1 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>传智播客设计学院简介</title>
6 </head>
7 <body>
8 <img src="images/sheji.jpg" alt="网页设计、平面设计、UI设计"/>
9 <h2>传智播客设计学院-设计师的摇篮</h2>
10 <p>传智播客设计学院成立于2010年，专注于平面设计师、网页设计师、UI设计师的培养。我们拥有专业的师资团队，清晰合理的课程架构，4个月的学习循序渐进、充实饱满，从最基础的设计软件Photoshop和Illustrator开始学起，通过基础美术学习透视和光影关系，课程中结合大量的案例和实战项目，4个月的学习相当于两年工作经验。</p>
11 <p>传智播客设计学院教给你的远远不止如何作图，在这里你将学到真正的设计素养和理念，毕业之后，你将成为平面、网页、UI设计都精通的全能设计师。</p>
12 <p>迄今为止，传智播客设计学院已经培养出了上万名设计师，遍布于各个大中型企业，同时，从传智播客走出去的学员也得到了各个企业的一致认可和好评。</p>
13 </body>
14 </html>
在【example03】中，使用<img />标记插入图像，同时通过<h2>标记和<p>标记分别定义标题和段落文本。
运行【example03】，效果如图2-29所示。
HTML结构页面
控制图像
在图2-28所示的页面中，文字位于图像下方。要想实现图2-11所示，图像居左文字居右，并且图像和文字之间有一定距离的排列效果，就需要使用图像的对齐属性align和水平边距属性hspace。
接下来，对【example03】中的图像加以控制，将第9行代码更改如下：
<img src="images/sheji.jpg" alt="我到传智播客设计学院学网页、平面、UI设计去喽" align="left" hspace="30"/>
保存HTML文件，刷新网页，效果如图2-30所示。
控制图像
控制文本
通过对图像进行控制，实现了图像居左文字居右的效果。要想实现图2-12所示，段落中的某些文字以特殊的颜色突出显示、标题和段落文本的字体和字号不同，可以使用文本样式标记<font>。同时通过空格符“ ”可实现段落前的留白效果。
接下来，对文本加以控制，具体代码如下：
15 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
16 <html xmlns="http://www.w3.org/1999/xhtml">
17 <head>
18 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
19 <title>传智播客设计学院简介</title>
20 </head>
21 <body>
22 <img src="img/laopo.jpg" alt="我到传智播客设计学院学网页、平面、UI设计去喽" align="left" hspace="30"/>
23 <h2><font face="微软雅黑" size="6" color="#545454">传智播客设计学院</font></h2>
24 <p>
25 <font size="2" color="#515151">
26 <font color="#0e5c9e">传智播客设计学院</font>成立于2010年，专注于平面设计师、网页设计师、UI设计师的培养。我们拥有专业的师资团队，清晰合理的课程架构，4个月的学习循序渐进、充实饱满，从最基础的设计软件Photoshop和Illustrator开始学起，通过基础美术学习透视和光影关系，课程中结合大量的案例和实战项目，4个月的学习相当于两年工作经验。
27 </font>
28 </p>
29 <p>
30 <font size="2" color="#515151">
31 <font color="#0e5c9e">传智播客设计学院</font>教给你的远远不止如何作图，在这里你将学到真正的设计素养和理念，毕业之后，你将成为平面、网页、UI设计都精通的全能设计师。
32 </font>
33 </p>
34 <p>
35 <font size="2" color="#515151">
36 ;迄今为止<font color="#0e5c9e">传智播客设计学院</font>已经培养出了上万名设计师，遍布于各个大中型企业，同时，从传智播客走出去的学员也得到了各个企业的一致认可和好评。
37 </font>
38 </p>
39 </body>
40 </html>
这时，保存【example03】文件，刷新【example03】所在的页面，效果如图2-31所示。
控制文本
实验课程二掌握css的语法
一、实验目的与要求
1.掌握css的语法。
2.学会文本的大小和颜色的设置。
二、实验内容
.构建基础网页
三、实验器材
微机+windows操作系统+HB
四、实验步骤
分析效果图
图3-1所示的“文字Logo”由6个英文字母构成，它们的大小相同、颜色不完全相同，且为粗体。为了方便地控制Logo中的6个英文字母，可以使用6个<strong>标记环绕它们。对于文本的大小和颜色则可以使用CSS的font-size和color属性进行设置。
制作页面结构
根据上面的分析，使用相应的HTML标记来搭建网页结构，如【example04】所示。
【example04】
41 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
42 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
43 <html xmlns="http://www.w3.org/1999/xhtml">
44 <head>
45 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
46 <title>文字Logo</title>
47 </head>
48 <body>
49 <strong>G</strong>
50 <strong>o</strong>
51 <strong>o</strong>
52 <strong>g</strong>
53 <strong>l</strong>
54 <strong>e</strong>
55 </body>
56 </html>
运行【example04】，效果如图3-10所示。
图 3-10 HTML结构页面效果
定义CSS样式
下面使用CSS对图3-10所示的“文字Logo”进行修饰，实现图3-1所示效果。这里使用内嵌式CSS样式，步骤如下：
添加类名
为页面中需要单独控制的标记添加相应的类名，具体代码如下：
<strong class="blue">G</strong>
<strong class="red">o</strong>
<strong id="orange">o</strong>
<strong class="blue">g</strong>
<strong id="green">l</strong>
<strong class="red">e</strong>
控制文本大小
strong{ font-size:100px;}
由于6个英文字母的大小相同，且都是用<strong>标记定义的，所以此处使用标记选择器strong。
控制文本颜色
.blue{ color:#2B75F5;}
.red{ color:#D33E2A;}
#orange{ color:#FFC609;}
#green{ color:#00A45D;}
至此，完成效果图3-11所示的文字Logo。这时，刷新【example04】所在的页面，效果如图3-11所示。
实验课程三盒子布局
实验目的与要求
（1）给外面的盒子设置宽度、高度、背景图像等样式。需要注意的是，背景图像需要设置为沿着水平方向平铺。
（2）给里面的盒子设置宽度、高度、背景图像样式。需要注意的是，背景图像需要设置为不平铺，且距离外面盒子的左边和上边都有一定的距离。
一、实验目的与要求
给外面的盒子设置宽度、高度、背景图像等样式。需要注意的是，背景图像需要设置为沿着水平方向平铺。
给里面的盒子设置宽度、高度、背景图像样式。需要注意的是，背景图像需要设置为不平铺，且距离外面盒子的左边和上边都有一定的距离。
二、实验内容
.构建基础网页
三、实验器材
微机+windows操作系统+HB
四、实验步骤
图4-19所示的“咖啡店banner”可以使用内外嵌套的两个盒子(div)来定义，结构如图4-29所示。
结构分析
控制效果图4-19的样式主要分为2个部分：
给外面的盒子设置宽度、高度、背景图像等样式。需要注意的是，背景图像需要设置为沿着水平方向平铺。
给里面的盒子设置宽度、高度、背景图像样式。需要注意的是，背景图像需要设置为不平铺，且距离外面盒子的左边和上边都有一定的距离。
根据上面的分析，使用相应的HTML标记来搭建网页结构，如【example09】所示。
【example09】
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>咖啡店banner</title>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
运行【example09】，此时页面中将不显示任何元素。
搭建完页面的结构后，接下来使用CSS对页面的样式进行修饰。本节采用从整体到局部的方式实现图4-19所示的效果，具体如下：
定义基础样式
/*将页面中所有元素的内外边距设置为0*/
*{ padding:0; margin:0;}
控制外层盒子
.outer{ /*设置外面盒子的样式*/
width:900px;
height:344px;
margin:50px auto;
background:url(images/bg.png) repeat-x;
}
在上面的代码中，第5行代码“background:url(images/bg.png) repeat-x;”用于给外层的盒子添加水平平铺的背景图像。
控制内层盒子
.inner{ /*设置里面盒子的样式*/
width:900px;
height:344px;
background:url(images/coffee.png) no-repeat center 30px;
}
在上面的代码中，第4行代码“background:url(images/coffee.png) no-repeat center 30px;”用于给内层盒子添加不平铺的背景图像，该背景图像在外层盒子垂直居中、且距离外层盒子的左边缘30px。
至此，完成图4-19所示“咖啡店banner”的CSS样式部分。刷新【example09】所在的页面，效果如图4-30所示。
CSS控制“咖啡店banner”效果
一、实验目的与要求
运用背景属性（background）为ul添加大的背景图。
为li添加宽高和边框样式，并设置最后一个li为无边框样式。
二、实验内容
利用列表设置导航条
三、实验器材
微机+windows操作系统+HB
四、实验步骤
图5-1所示的电商“悬浮框”，商品分类清晰，各条商品分类并列存在、且排序不分先后，因此可以通过无序列表<ul>进行定义。效果图5-1对应的结构如图5-3所示。
图 3-11 结构分析
实现效果图5-1所示样式的思路如下：
运用背景属性（background）为ul添加大的背景图。
为li添加宽高和边框样式，并设置最后一个li为无边框样式。
根据上面的分析，使用相应的HTML标记来搭建网页结构，如【example11】所示。
运行【example11】，效果如图5-4所示。
图 3-12 HTML结构页面效果图
搭建完页面的结构后，接下来使用CSS对页面的样式进行修饰。本小节采用从整体到局部的方式实现图5-1所示的效果，具体如下：
定义基础样式
首先定义页面的统一样式。CSS代码如下：
/*全局控制*/
body{font-size:16px; font-family:"微软雅黑"; color:#222;}
/*重置浏览器的默认样式*/
body,ul,li{ padding:0; margin:0; list-style:none;}
为ul添加背景
ul{
width:171px;
height:299px;
background:url(images/bg.jpg) no-repeat;
padding-top:190px;
color:#fff;
}
为li添加宽高和边框样式
li{
width:80px;
height:40px;
text-align:center;
line-height:40px;
border-bottom:1px dotted #fff;
margin-left:45px;
}
.no_line{border:none;} /*设置类名为.no_line的li无边框样式*/
至此，完成图5-1所示电商悬浮框的CSS样式部分。刷新【example11】所在的页面，效果如图5-5所示。
图 3-13 悬浮框CSS样式效果
一、实验目的与要求
观察效果图8-22不难看出，本案例模拟了一款计算器。其中，前两个文本输入框用于输入操作数，<select>下拉菜单中包含＋、－、×、÷四个运算符，默认为加法运算符。用户输入操作数并选择相应的运算符，然后按下“等号”按钮，这时最后一个文本框中将输出相应的运算结果。
二、实验内容
利用JS设置导航条
三、实验器材
微机+windows操作系统+HB
四、实验步骤
观察效果图8-22不难看出，该计算器页面结构清晰，主要由文本框、下拉菜单和按钮组成，具体结构如图8-37所示。
图 3-10 结构分析
观察效果图8-22不难看出，本案例模拟了一款计算器。其中，前两个文本输入框用于输入操作数，<select>下拉菜单中包含＋、－、×、÷四个运算符，默认为加法运算符。用户输入操作数并选择相应的运算符，然后按下“等号”按钮，这时最后一个文本框中将输出相应的运算结果。
根据上面的分析，使用相应的HTML标记来搭建网页结构，如【example25】所示。
【example25】
在上面的代码中，定义了id名为num1和num2两个文本输入框，分别用于输入所要计算的数值，并且定义了id名为result的文本框来输出运算结果。另外，<select>下拉菜单中定义了四个运算符，当点击下三角时，四个运算符将依次显示出来，供用户选择相应的运算。
运行【example25】并点击下三角，效果如图8-38所示。
图 3-11 结构分析
下面，采用内嵌式的方法引入JavaScript代码，具体如下：
在上面的代码中，JavaScript脚本按照从上到下的顺序执行，当满足条件时，便输出结果且终止后续代码的执行。其中，第10行代码定义了变量expression用来存放运算表达式，第12~26行代码运用if条件语句判断不同的运算情况。当num1和num2的值都为真时，执行运算表达式并输出结果，否则，继续执行下面的语句。另外，如果选择的运算符是“/”且num2的值为0，则输出“除数不能为0”；如果num1和num2中一个值为真另一个值为0时，执行对应的表达式并输出结果；如果num1和num2的值都为0时，执行对应的表达式并输出结果；当上述条件都不满足时则输出“请输入数字”。
保存代码，刷新页面，即可在如图8-22所示的网页计算器中进行简单的运算。
实验六： 综合实例
一、实验目的与要求
通过JavaScript实现限时秒杀效果的思路如下：
二、实验内容
利用JS设置限时秒杀
三、实验器材
微机+windows操作系统+HB
四、实验步骤
观察图9-1、图9-2容易看出该“限时秒杀”页面主要由背景图片和秒杀计时两部分组成。其中，背景图片可以通过对外层div添加背景来设置，秒杀计时部分通过三个span标记进行定义。由于秒杀结束后，会有一个提示语，还需要在span标记之后定义一个div（默认隐藏）。效果图9-1、9-2对应的结构如图9-10所示。
图 3-12 “限时秒杀”结构分析
实现效果图9-1和9-2所示样式的思路如下：
通过JavaScript实现限时秒杀效果的思路如下：
根据上面的分析，使用相应的HTML标记来搭建网页结构，如【example26】所示。
【example26】
53 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
1 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>限时秒杀</title>
6 </head>
7 <body onload="fresh()">
8 <div class="img-box"> <!--设置秒杀时间块-->
9 <span id="hour"></span>
10 <span id="munite"></span>
11 <span id="second"></span>
12 <div id="bot-box"></div> <!--设置限时秒杀结束块-->
13 </div>
14 </body>
15 </html>
由于在结构中没有任何内容，此时保存并运行【example26】，页面中不会显示任何效果。
搭建完页面的结构后，接下来使用CSS中的相关样式对页面重新进行布局，具体代码如下：
（1）. 定义基础样式
首先定义页面的统一样式，CSS代码如下：
/*全局控制*/
body{font-size:20px; color:#fff; font-family: microsoft yahei,arial;}
/*清除浏览器默认样式*/
img{list-style:none; outline:none;}
（2）. 设置限时秒杀样式
.img-box{
position:relative;
background:url(images/flash_sale.png);
width:702px;
height:378px;
margin:0 auto;
}
.img-box span{
position:relative;
text-align:center;
line-height:26px;
margin:4px 0 0 3px;
}
.img-box #hour{
left:50.6%;
top:68.35%
}
.img-box #munite{
left:55.2%;
top:68.35%;
}
.img-box #second{
left:59.6%;
top:68.35%;
}
（3）. 设置秒杀结束样式
#bot-box{
position:absolute;
z-index:1;
top:250px;
display:none;
width:702px;
height:51px;
line-height:40px;
text-align:center;
color:#666;
font-size:28px;
}
至此，完成图9-1所示电商网站限时秒杀的CSS样式部分。刷新【example26】所在的页面，效果如图9-11所示。
图 3-13 CSS样式效果
页面布局和样式设计完成后，下面通过JavaScript代码实现显示秒杀时间效果，具体代码如下：
在上面的JavaScript代码中，通过getTime()方法分别获取秒杀结束时间与当前时间的毫秒数，并将其相减转换成秒杀剩余的秒数，其中第9~11行代码计算秒杀剩余的小时、分钟和秒数，然后在第12~17行代码中分别判断小时、分钟和秒并对其分别进行处理，继而判断秒杀是否结束，最后通过setInterval()设置倒计时，使秒杀时间动态显示。
将第4行代码的秒杀结束时间设为一个大于当前的时间，保存并刷新页面，可以得到图9-12所示的效果。
图 3-14 JavaScript秒杀计时效果
当图9-12所示的剩余时间自减为0时，页面会自动变为图9-13所示的效果，即秒杀活动结束。
J