网页设计课期末复习材料

简答:

1.HTML**的全称是什么?中文名是什么?工作原理是什么?优点和缺陷?**

Hyper Text Markup Language 超文本标记语言

工作原理:html通过标记要显示的网页中的各个部分,以通知web浏览器应该如何显示网页,即确定网页内容的格式。浏览器按照顺序阅读html文件,根据内容附近的html标记来解释和显示内容,展示图文并茂的效果。

优点:简易性,可扩展性,平台无关性。

缺陷:表现能力差,缺乏动态性,冗余代码多,不容易维护。

2.CSS**的全称是什么?中文名是什么?在网页中有什么作用?**

Cascading Style Sheet 层叠样式表

在网页中的作用:它可以提供更多的网页样式,使网页的元素更丰富,可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。实现了“内容与表现分离”,易于修改控制,容易维护。

3.**表单的功能是什么?工作原理?常用的表单控件有哪些?**

表单是用于实现网页浏览者与服务器之间信息交互的一种页面元素,它由表单控件和一般内容组成。

工作原理:1.访问者填写表单提交到WEB服务器2.服务器端运行脚本程序处理表单数据3.动态生成html网页回复访问者。

常用的控件:单行文本框text、口令框password、单选框radio、复选框checkbox、提交按钮submit、图形按钮image、重置按钮reset、上传文件file、隐藏内容hidden、


程序:

1.**用表格制作框线**

思路:将TABLE的bgcolor属性设置为要显示的线的颜色,将TABLE的cellspacing属性设置为细线的粗细(通常为1),将单元格或表格行的bgcolor属性设置为不同于表格bgcolor的值(通常设置为white)。

代码示例:

<html>

<body>

<table bgcolor=black cellspacing=”1” width=”500” height=”300”>

<tr bgcolor=white>

<td bgcolor=white></td>

</tr>

</table>

</body>

</html>

效果:

2.**用表格制作细线**

思路:将TABLE的cellspacing属性和cellpadding的属性都设置为0,将要作为细线的单元格的bgcolor属性设置为细线的颜色,将该单元格的width属性(竖线)或height属性(横线)设置为细线的粗细(通常为1),注意该单元格中不能有任何内容(包括空格)。

代码示例:

<html>

<body>

<table cellspacing=”0” cellpadding=”0” width=”201” height=”201”>

<tr>

<td bgcolor=white height=”100” width=”100”>&nbsp;</td>

<td bgcolor=black width=”1” height=”100”></td>

<td bgcolor=white height=”100” width=”100”>&nbsp;</td>

</tr>

<tr bgcolor=black>

<td height=”1” width=”100”></td>

<td height=”1” width=”1”></td>

<td height=”1” width=”100”></td>

</tr>

<tr>

<td bgcolor=white height=”100” width=”100”>&nbsp;</td>

<td bgcolor=black width=”1” height=”100”></td>

<td bgcolor=white height=”100” width=”100”>&nbsp;</td>

</tr>

</table>

</body>

</html>

效果:


3.**做一个盒子,要求如下: **

边框样式为dotted,上,右 ,下,左的Padding分别为30,40,50,60

盒子的宽为500,长为600

上下边框的宽度为4,左右边框的宽度为10

上边距为3cm,右边距为2cm,下边距为1cm,左边距为4cm

背景颜色为黄色。background-color:yellow。

<html>

<head>

<style type=”text/css”>

p

{

border-style: dotted;

padding:30px 40px 50px 60px;

width:500;height:600;

border-width:4px 10px;

margin:3cm 2cm 1cm 4cm;

background-color:yellow;

}

</style>

</head>

<body>

<center>

<p>

</body>

</html>

效果:

4.**表单示例:**

<html>

<body>

<form>

单行文本框:

<input type=”text” />

<br />

口令框:

<input name=”password” />

<br />

复选框:

<input type=”checkbox” checked=”checked” value=”1”/>苹果

<input type=”checkbox” value=”1”/>香蕉

<input type=”checkbox” value=”1”/>梨

<br />

单选框:

<input type=”radio” checked=”checked” value=”male”>男

<input type=”radio” value=”female”>女

<br />

多行文本框:

<textarea rows=”10” cols=”30”>lalala</textarea>

<br />

提交按钮:

<input type=”submit” value=”Submit” />

<br />

重置按钮:

<input type=”reset” value=”重置” />

<br />

选项菜单:

<select name=”cars”>

<option value=”A”>A</option>

<option value=”B”>B</option>

<option value=”C” selected=”selected”>C</option>

<option value=”D”>D</option>

</select>

</form>

</body>

</html>

效果:

5.**图文混排:**

<html>

<head>

<style type=”text/css”>

body{

background-color:bb0102; / 页面背景颜色 /

margin:0px;

padding:0px;

}

img{

float:right; / 文字环绕图片 /

/margin-right:50px; / 右侧距离 */

/margin-bottom:25px; / 下端距离 */

}

p{

color:#FFFF00; / 文字颜色 /

margin:0px;

padding-top:10px;

padding-left:5px;

padding-right:5px;

}

span{

float:left; / 首字放大 /

font-size:85px;

font-family:黑体;

margin:0px;

padding-right:5px;

}

</style>

</head>

<body>

<img src=”chunjie.jpg” border=”0”>

<p><span>春</span>节古时叫“元旦”。“元”者始也,“旦”者晨也,“元旦”即一年的第一个早晨。《尔雅》,对“年”的注解是:“夏曰岁,商曰祀,周曰年。”自殷商起,把月圆缺一次为一月,初一为朔,十五为望。每年的开始从正月朔日子夜算起,叫“元旦”或“元日”。到了汉武帝时,由于“观象授时”的经验越来越丰富,司马迁创造了《太初历》,确定了正月为岁首,正月初一为新年。此后,农历年的习俗就一直流传下来。</p>

<p>据《诗经》记载,每到农历新年,农民喝“春酒”,祝“改岁”,尽情欢乐,庆祝一年的丰收。到了晋朝,还增添了放爆竹的节目,即燃起堆堆烈火,将竹子放在火里烧,发出噼噼啪啪的爆竹声,使节日气氛更浓。到了清朝,放爆竹,张灯结彩,送旧迎新的活动更加热闹了。清代潘荣升《帝京岁时记胜》中记载:“除夕之次,夜子初交,门外宝炬争辉,玉珂竞响。……闻爆竹声如击浪轰雷,遍于朝野,彻夜无停。”</p>

<p>在我国古代的不同历史时期,春节,有着不同的含义。在汉代,人们把二十四节气中的“立春”这一天定为春节。南北朝时,人们则将整个春季称为春节。1911年,辛亥革命推翻了清朝统治,为了“行夏历,所以顺农时,从西历,所以便统计”,各省都督府代表在南京召开会议,决定使用公历。这样就把农历正月初一定为春节。至今,人们仍沿用春节这一习惯称呼。</p>

</body>

</hml>

效果:

6.div+css**页面设计示例:**

<html>

<head>

<style type=”text/css”>

#body{

background-color:white;

margin:0px;

padding:0px;

width:500px;

height:400px;

}

#qingjia{

margin:0px;

padding:40px;

width:500px;

height:100px;

text-align:center;

}

#shuru{

boder-stytle:dotted;

margin:0px;

padding:20px;

width:500px;

height:200px;

text-align:left;

}

#tijiao{

margin:0px;

padding:20px;

width:500px;

height:100px;

text-align:left;

}

</style>

</head>

<body>

<center>

<div>

<div>请假单</div>

<div>

学号<input name=number><br><br>

姓名<input name=name><br><br>

请假事由<textarea rows=”3” cols=”30”>&nbsp;</textarea>

</div>

<div>

<input value=”提交”>

</div>

</center>

</body>

</html>

效果:

分享到:

评论完整模式加载中...如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理