当前位置：首页 > news >正文

网页设计期末复习题

news 来源：原创 2024/11/19 22:54:22

一、填空题（每空2分，共20分)
1.网站的访问方式有域名访问、 _IP地址访问、二维码访问。
2. 网站的设计原则需满足：简洁醒目、风格统一、 _内容丰富__、记忆持久、便捷有效。
3.设置网页超链接时，可以通过 页面属性__对话框完成。
4.Dreamweaver 的站点包括本地站点 和远程站点。
5.在网面编辑过程中，需要在浏览景中查看效果，可以直接按F12 键。
6.能够定义所有P标签内文字加粗的HTML P｛font-weight:bold;｝代码语言
7.表单内设置的各个填写区域称为表单域 不同的项目称为表单对象。
8.网防设计主要包括配色、字体、布局3个方面，其中最主要的是 网页的布局
9.在Dreamveaver中，捆绑了Javsscript和CSS3 特效库，提供了一种友好的，可视化的操作界面，方便用户调用。
10.根据祥式代码的位置，Css样式可以分为3种，即行内样式、内嵌样式、外部样式 。
二、选择题（每题3分，共30分）

1.能被绝大多数的浏览器完全支持的图像格式为（A）

A.gif和jpeg B.gif和png C.jpeg和png D.png和bmp

2.下列配色的误区是（A)

A.多用颜色 B.用同一色系 C.用同一颜色 D.主色不超过三种

3.预览网页效果快捷键是（C）。

A.F2 B.F5 C.F12 D.F1

4.不属于网页中常用的音频文件格式的（D )。
A.Mid格式 B.WAV格式 C.MP3格式 D.MP4格式
5.列表分为( A )。
A.有序列表与无序列表         B.项目符号与数字符号
C.数字符号与标点符号         D.项目符号与有序列表
6.下列关于 CSS 样式表作用的叙述中正确的是（B)。
A.精减网页，提高下载速度
B.只需修改一个css代码，就可改变页数不定的网页外观和格式
C.可以在网页中显示时间和日期
D.在不同浏览器和平台之间具有较好的兼容性
3.为了增强 css 样式代码的可读性，可以在代码中插入注释语句。下列选择中注释语句格式正确的是 (A )
A./*注彩语句*/         B.//注释语句         C.//注释语句//         D.’注释语句
8.以下有关表单属性参数功能的叙述，错误的是（B）。
A.ID:设置表单的名称
B.Claze：类选择器
C.Action：设置处理表单的服务器脚本路
D.lethod:设置表单处理后反绩页面打开的方式
9.定义表格的展性时，在Ktable》标签中可以设置表格边框颜色属性的是（B）。
A.border      B.bordercolor         C.color       D.colspan
10，CSS动画不包括（B ）类型。

A.transition B. transport C.transform D.animation

三、简答题（每题6分，共30分）

网站的设计原则。

答：网站的设计原则：简洁醒目、风格统—、内容丰富、记忆持久、便捷有效。
一个网站需要满足两部分人的需求：一部分是网站所有者，网站内容必须满足所有者展示、宣传、交流和推广等方面的需求，另一部分是网站使用者，网站最重要的是实用性,能为使用者提供良好的用户体验，才能使网站被认可和受欢迎。
①简洁醒目
“简洁”是网站设计的首要原则，通常情况下，用户希望迅速找到他们需要的信息。整洁简单的设计，有利于导航和标题的清晰识别。
网站标志和页面形象要醒目，能够吸引浏览者的注意力。在设计时要注重使用生动、鲜明和概括性的视觉语言，利用图形和色彩等创意展示文字内容，从而使表达方式更有吸引力。
②风格统—
网站的构成页面虽多，但作为一个整体，必须有统一的风格。主页风格往往决定了整个网站的风格，如奔驰中国官网的首页和内页，如图2-5所示。
③内容丰富
网站的价值体现在网站内容上，丰富、专业、精准的网站内容，能够吸引更多的浏览者，增加网站访问量，从而创造出更大的价值。
④记忆持久
网页内容的布局，可以借助结构比例、视觉诱导、动静对比、调和与均衡等关系来设计，使网站更加新颖、有创意，从而使浏览者印象深刻，形成长久性的记忆。
⑤便捷有效

网页内容及时更新，定期检查链接的有效性，能保证用户使用顺畅。优化网页内容，提升页面加载速度，让浏览者在访问网站时速度更快，体验更好。功能简单、操作便利，已经成为网站、APP设计的主流趋势。

2.简述表格标识(table,caption,tr,th,td)。

答：表格是由单元格组成的，在用HTML语言编写表格代码时需要按一定的结构编写。一个简单的表格由五对标签组成，分别是表格标签、表格标题标签、行标签、表头标签和单元格标签。

表格标签<table></table>：定义一个表格，每一个表格只有一对<table>和</table>，一个页面中可能有多个表格
表格标题标签<caption></caption>：定义表格的标题，不会显示在表格范围内，而是默认居中显示在表格的上方
行标签<tr></tr>：定义表格的行，一个表格可以包含多行
表头标签<th></th>：定义表头单元格，位于<th>与</th>之间的文本以默认的粗体居中的方式显示
单元格标签<td></td>：定义表格的一个单元格，每行可以包含多个单元格

3.简述使用外部样式表的优势。

答：外部样式表是一个拓展名为.css的文档，使用外部CSS有很多优势，主要表现在以下几个方面。

简化HTML，使HTML源代码很少。
提高网页打开速度。浏览器下载网页时分开线程，就像加载一个页面时有两条线同时打开一个页面，使网页打开速度格外快。
修改网页的样式方便，只需修改CSS样式即可修改网页的美工样式。

4.简述font元素常用属性（family,size,color）。

答： HTML语言对文本样式的设置主要通过HTML的font元素来实现，其基本格式为<font>文本</font>。

family 属性：文字的字形属性 family 用来设定文字的字体(如宋体、黑体等)。其基本格式为<font-family:属性值>。
size属性：文字的大小属性size用来设定文字的字号，文字的字号可以设置为具体的像素值。其基本格式为<font-size：属性值px>。
color 属性：文字的颜色属性color 用来设定文字的色彩（属性值可以是英语的颜色单词，也可以是十六进制代码)。其基本格式为<font-color：属性值>。

family属性：用来设定文字的字体（如宋体、黑体等），本格式为<font-family：属性值>。

size属性：用来设定文字的字号，文字的字号可以设置为具体的像素值。基本格式为：<font-size：属性值px>。

color属性：用来设定文字的色彩。基本格式为<font-color：属性值>。

5.简述CSS样式的特点。
答： CSS样式具有很多优点，例如，可以大大缩减页面代码，提高页面浏览速度，缩减带宽成本；CSS结构清晰，容易被搜索引擎搜索到，其表现在如下几个方面。

丰富的样式定义：CSS提供了丰富的文档样式外观，可以设置文本和背景属性；允许为任何元素创建边框，设置元素边框与其他元素间的距离；允许随意改变文本的大小写方式、修饰方式等效果。
易于使用和修改：CSS可以将样式定义在HTML元素的 style属性中，也可定义在header 部分，还可写在一个专门的CSS 文件中(即 CSS 样式表)，将所有的样式声明统一存放，进行统一管理。如果要修改样式，只需在样式列表中修改即可。
多页面应用：CSS样式表可以单独存放在一个CSS文件中，这样可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
层叠：即对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。
页面压缩：使用HTML定义页面需要大量或重复的表格和各种规格的文字样式，这样做会产生大量的HTML标签，从而使页面文件的大小增加，而使用CSS可以大大减小页面体积，使加载页面的速度得到提升。

四．网页设计。

<！doctype html>
<html>
<head>
<meta charset="utf-8”>
<title>舌尖上的中国</title>
<link href="style/test.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<div id="box">
<div id="page">
<h2 align="center">舌尖上的中国</h2>
<br>
cemsp;在吃的法则里，风味重于一切！<br>
&emsp;cemep;中国人从来没有把自己束缚在一张乏味的食品清单上。 <br>
&emep;cemap;人们怀着对食物的理解，在不断的尝试中寻求着转化的灵感。</div>

</div>
<div id="bottom"><img src="images/bottom.png" alt="" /></div>
19 </body>
20 </html>

body{

font-size:18px;
line-height:25px;
background-image:uri(../images/background.jpg);
background-repeat:no repeat;

}

设置网页整体效果↑
#box{

width:1002px; 内容大小
height:400px;
background-image:url(../images/ms.png)；- 背景图片
background-position:
margin:0 auto; centerbottom; -布局居中背景居中
设置主体布局↑

#page｛
background:rgba(255,255,255,0.5);-- 背景颜色(半透明)
width：290px；
height:200px;
padding:10px 60px 85px 50px; 宽度和高度
margin:40px Opx Opx 160px; 内边距和外边距
border-style:solid;------- 边框线形
border-width:1px;-
border-radius:20px;- 边框粗细
line-height:30px; 圆角边框
border-color:gray;
设置内容样式↑
设置底部图片样式↓