[分享]网页设计快速教程与实例[泥客论坛（十几年前的回忆）]

>> 网页设计交流，相互学习，共同进步……

搜一搜相关精彩主题

泥客论坛（十几年前的回忆） → 泥客技术 → ☆网页制作☆ → [分享]网页设计快速教程与实例

您是本帖的第 9077 个阅读者

树形打印

标题：

[分享]网页设计快速教程与实例

小轲

头衔：泥客主席

等级：校长

威望：10

文章：10704

积分：67065

楼主

[分享]网页设计快速教程与实例

从某一种定义上说，所谓的网页，就是用特定的源代码表达一个界面，当我们打开网页时，再由浏览器把这些代码重新以Window界面的形式表达出来。
用各种的网页制作软件制作网页，其实也可以说成用网页制作软件自带的代码，引导用户表达自己的构思，但如果用户想达到更好更自由的表达效果，最好的方法就是自己编写源代码来制作网页。
下面，我们就从HTML→CSS→DHTML(以JavaScript和VBScript为主)基础为大家作简明的说明介绍。
首先，我们要了解网页代码的构造，一般，有效的网页代码都会包含在星括号“<>”内，星括号“<>”内的内容就是这个网页的运行参数，大都不会在网页内显示，只会使网页显示出相应的效果。基本来说，网页的内容都包含在<HTML>和</HTML>之间，大家看一个网页的源代码时，只要在浏览器内点击“查看”→“源文件”就可以了。
这里就需要说明一点，就是HTML代码大都都有一种配对关系，即编写一个带星括号“<>”的代码，，一般都有一个带“/”的结束语，如<body>开始</body>结束或<body bgcolor=black>开始</body>都是一样，我们在编写时要注意。
在编写代码时，我们只要先新建一个文本文件（.txt文件），然后把代码编写在这个文本文件里面，编写好以后，按“文件”→“另存为...”，把文件的扩展名改为.htm或.html，如“网页.htm”，文件类型改为“所有类型”，保存就可以了。

2005/1/17 0:19:03

小轲

头衔：泥客主席

等级：校长

威望：10

文章：10704

积分：67065

第 2 楼

HTML篇

很多不会HTML的朋友可能对其中的内容不太明白，下面我就对表中元素的用法作简单的介绍。
请大家先看下面的代码，这是一个简单明了的示例网页,其中红色部分为代码，“//”之后的内容就是该行代码意思的解释，希望大家举一反三，学会其中的语法规则。 <html> //开始一个网页的标记 <head> //开始页面外的内容 <title>示例网页</title> //定义该网页标题为“示例网页” </head> //结束页面外的内容 <body bgcolor=yellow> //开始页面内的内容并定义背景色为黄色内容 //内容 <h1>内容1</h1> //大小为一级的内容 <h2>内容2</h2> //大小为二级的内容 <h3>内容3</h3> //大小为三级的内容（默认） <h4>内容4</h4> //大小为四级的内容 <h5>内容5</h5> //大小为五级的内容 <font color="red">红色的字</font><br> //红色字的内容,“<br>”为切换到下一行，不用配对，下同 <font face="黑体">黑体的字</font><br> //字体为黑体的内容 <font color="red" face="黑体">红色黑体的字</font> //颜色为红色,字体为黑体的内容（即说明一个元素可以有多个属性，中间以空格相隔） </body> //结束页面内的内容 </html> //结束一个网页的标记
大家只要先新建一个文本文件（.txt文件），然后把上述红色的内容复制到这个文本文件里面，编写好以后，按“文件”→“另存为...”，把文件的扩展名改为.htm或.html，如“网页.htm”，文件类型改为“所有类型”，保存就可以看到效果了。其它的代码用法也是一样，如果你是入门者就只要多试几次就会了。

2005/1/17 0:20:34

小轲

头衔：泥客主席

等级：校长

威望：10

文章：10704

积分：67065

第 3 楼

CSS篇:
所谓CSS（Cascading Style Sheet，层叠样式表）,简单来说，就是在网页中对某些特定的元素的属性（如颜色、字体、大小、位置等）作强制统一定义，并具有一定的继承性和通用性，同时补充了HTML的一些不足。
例如，我们要把“<h2>”大小的文字都变成红色，在HTML中就要在每个“<h2>”中加入“<font color="red">”，如果有几十组"<h2>"大小的文字，麻烦就大了。
CSS就解决了这个问题，我们只要在CSS中定义好“<h2>”大小的文字都是红色的，这就方便多了。同时，文件的大小也大大地减少。
CSS的代码为<style>,用法主要有两种，一种是全局定义，一种的局部定义。
全局定义就是一开始把所有属性定义好，到使用时再根据一定条件调用出来。
如例子1，这是CSS的最基本用法，其中红色部分为代码，“//”之后的内容就是该行代码意思的解释，希望大家举一反三，学会其中的语法规则。
<html> //开始一个网页的标记 <head> //开始页面外的内容 <title>CSS示例</title> //定义该网页标题为“示例网页”
<style> //开始定义CSS样式 h1{color:red;font-family:黑体;} //定义H1大小的文字为红色的黑体字 h2{color:blue;font-family:黑体;} //定义H2大小的文字为蓝色的黑体字 h3{font-size:50} //定义H3大小的文字的字号大小强制为50号 h4{background-color:yellow;} //定义H4大小的文字的背景颜色为黄色 </style> //结束CSS样式的定义
</head> //结束页面外的内容 <body leftmargin="0" rightmargin="0" bottommargin="20" topmargin="0" bgcolor="#FFFFFF" text="#000000" id="all" leftmargin="0" rightMargin=0 topmargin="0" link="#000020" vlink="#000020" alink="#000020" background=images/very_christmas/bg.gif> //开始页面内的内容
<h1>H1的文本1</h1> //大小为H1的文本1 <h2>H2的文本</h2> //大小为H2的文本 <h3>H3的文本</h3> //大小为H3的文本 <h4>H4的文本</h4> //大小为H4的文本 <h1>H1的文本2</h1> //大小为H1的文本2
</body> //结束页面内的内容 </html> //结束一个网页的标记
本例说明了CSS是包含在<style>和</style>之间，规则是定义属性的名字写在前面，属性参数写在名字后并用大括号包含着，属性参数用冒号“:”（半角的标点）定义，分号“;”（半角的标点）分隔，可多介属性同时使用。大家可以看出H1，H2，H3，H4的文本属性已被改变，改为了在CSS属性中定义好的属性，这就是CSS的特性。

2005/1/17 0:22:31

小轲

头衔：泥客主席

等级：校长

威望：10

文章：10704

积分：67065

第 4 楼

CSS除了可以定义指定元素的属性外，还可以预设一些样式，如例子2：
其中红色部分为代码，“//”之后的内容就是该行代码意思的解释，希望大家举一反三，学会其中的语法规则。
<html> //开始一个网页的标记 <head> //开始页面外的内容 <title>CSS示例</title> //定义该网页标题为“示例网页”
<style> //开始定义CSS样式 .color{color:red} //定义一个名叫color，字体颜色为红色的样式 .font{font-family:黑体;color:blue;} //定义一个名叫font，字体颜色为蓝色，字体为黑体的样式 .size{font-size:50} //定义一个名叫size，字号大小为50号的样式 </style> //结束CSS样式的定义
</head> //结束页面外的内容 <body leftmargin="0" rightmargin="0" bottommargin="20" topmargin="0" bgcolor="#FFFFFF" text="#000000" id="all" leftmargin="0" rightMargin=0 topmargin="0" link="#000020" vlink="#000020" alink="#000020" background=images/very_christmas/bg.gif> //开始页面内的内容
<h1 class=color>H1的样式1</h1> //在H1中应用color样式 <h1 class=font>H1的样式2</h1> //在H1中应用font样式 <h1 class=size>H1的样式3</h1> //在H1中应用size样式 <h2 class=font>H2的样式</h2> //在H2中应用font样式
</body> //结束页面内的内容 </html> //结束一个网页的标记
本贴附件就是上述示例2，本例说明了CSS可以预设一些样式，并在需要时调用，规则是在定义样式时在样式的名字前加上点号“.”（半角的标点），在元素中用“class=样式的名字”调用样式。

2005/1/17 0:23:03

小轲

头衔：泥客主席

等级：校长

威望：10

文章：10704

积分：67065

第 5 楼

CSS除了上述用法外，还有一种用法，就是局部用法。
例如，我们要用CSS定义一个“<h1>”大小的文字为红色，字号为30，我们可以直接在“<H1>”中加入“style="color:red;size:30"”,，
即“<h1 style="color:red;size:30">文字</h1>”，此方法几乎所有HTML元素通用，如果和JavaScript共用就可以达到更好的效果。

2005/1/17 0:23:23

小轲

头衔：泥客主席

等级：校长

威望：10

文章：10704

积分：67065

第 6 楼

CSS除了有很多的改变元素属性的功能处还带有很多特效滤镜，就做出如改变透明度、模糊等等的特效，在以后的应用中有很大的作用。

这个方面我也不是很了解，下面的作为今后参考学习的资料先发上来～

CSS过滤器（filter）是CSS的一种扩充，可以为特定的HTML元素（具体为body,button,div,img,input,marquee,span,table,td,textarea,th）产生如阴影、模糊、透明等效果，可以在IE4.0以上正确显示，无需另加脚本支持。
例如，要为图片<img>设置透明度为60%，可以用代码： <img src="pic.jpg" style="filter:alpha(Opacity=80)">
或设置img的属性： <style>
img{filter:alpha(Opacity=80)}
</style>
从上面可以看出，其语法规则为：filter:滤镜名称(滤镜的参数)，下面我对常用的过滤器作一些简介：
滤镜名称：Alpha 说明：设置透明效果
参数： Opacity：透明度大小的百分比，范围是0－100，分别代表0%-100%
FinishOpacity：设置渐变透明效果，范围也是0－100，分别代表0%-100%
style：指定渐变透明区域的形状，值为0为统一形状，值为1为线形，值为2为放射形，值为3为长方形
StartX：指定渐变透明开始时的X座标
StartY：指定渐变透明开始时的Y座标
FinishX：指定渐变透明结束时的X座标
FinishY：指定渐变透明结束时的Y座标
滤镜名称：Blur 说明：设置模糊效果
参数： add：是否改变为印象派的模糊效果，取值为“true”或“false”
Direction：设置模糊方向的角度，有效值为0，45，90，135，180，225，270，315八个方向
Strength：设置模糊的像素数，数值越大，模糊就越明显，默认为5
滤镜名称：Chroma 说明：将指定颜色设置为透明
参数： Color:指定一种要变为透明的颜色，如“Chroma(color=red)”就是设置网页中的红色变为透明色
滤镜名称：DropShadow 说明：设置阴影效果
参数： Color：指定投射阴影的颜色，如“DropShadow(color=red)”就是产生一个红色的阴影
OffX：指定阴影在X轴上的偏移量，默认为5，正数为X轴上的右方偏移量，负数为X轴上的左方偏移量
OffY：指定阴影在Y轴上的偏移量，默认为5，正数为Y轴上的上方偏移量，负数为Y轴上的下方偏移量
Positive：指定是否可以为网页中的透明对象指定阴影，“true”为只可以为网页中的正常对象指定阴影，“false”为可以为网页中的透明对象指定阴影
滤镜名称：FlipH 说明：设置水平翻转效果
参数：无
滤镜名称：Flipv 说明：设置垂直翻转效果
参数：无
滤镜名称：Glow 说明：设置发光效果
参数： Color：指定发光的颜色，如“Glow(color=red)”就是设置用红色光照射
Strength：指定发光的强度，值为0-255
注：适当地调整发光的颜色和发光的强度可以得到一些意想不到的效果，如文本的火焰效果或霓虹灯效果
滤镜名称：Gray 说明：去掉对象的颜色，改变为灰度显示（即彩色变为黑白）
参数：无
滤镜名称：Invert 说明：反相显示对象，产生出相片的底片效果
参数：无
滤镜名称：Mask 说明：设置透明膜效果，为物体创造出包在有色玻璃下的效果
参数： Color：设置透明膜效果的颜色，如“Mask(color=red)”就是设置一个红色的透明膜
滤镜名称：Shadow 说明：设置阴影效果（和DropShadow不同，DropShadow为比例一样的阴影，Shadow为带有扩散效果的阴影）
参数： Color：指定投射阴影的颜色，如“Shadow(color=red)”就是产生一个红色的阴影
Direction：设置阴影方向的角度，有效值为0，45，90，135，180，225，270，315八个方向
滤镜名称：Wave 说明：设置波纹效果（钮曲的一种）
参数： add：是否将对象按照正弦波形样式显示，取值为“true”或“false”，默认为“true”，表示以波形显示对象
Freq：设置波形频率
LightStrength：设置波形的光影效果，取值为0-100，数值越大，光影效果越明显
Phase：设置波形开始时的偏移量，取值为0-100，表示偏移量取自波长的百分比
Strength：设置波形的振幅
滤镜名称：Xray 说明：设置X光效果
参数：无

2005/1/17 0:25:07

小轲

头衔：泥客主席

等级：校长

威望：10

文章：10704

积分：67065

第 7 楼

Script的基本用法：
Script(脚本)实际上就是一段程序，主要分为服务器端运行的服务器端脚本和在浏览器直接运行的客户端脚本，本文为客户端脚本的基本教程，主要介绍客户端脚本的基本用法。
客户端脚本的主要功能用于检测浏览器功能、响应用户动作、验证表单数据和制作网页特效等。
以下实例就是一个最基本的应用Script的实例(本教程以JavaScript为主)：
其中红色部分为代码，“//”之后的内容就是该行代码意思的解释，希望大家举一反三，学会其中的语法规则。
<html> //开始一个网页的标记 <head> //开始页面外的内容 <title>JavaScript基本示例</title> //定义该网页标题为“示例网页”
<script language="javascript" type="text/javascript"> //开始一个Script脚本的标记，并定义编辑语言为javascript
function see() //定义一个名叫“see()”的脚本 { //脚本的内容是以“{”开始的 alert("我是一只菜鸟") //在“{”和“}”之间的为脚本内容，本内容是“当运行此脚本时，显示一个写着‘我是一只菜鸟’的消息框” } //脚本的内容是以“}”结束的
function baby() //定义一个名叫“baby()”的脚本 { //脚本的内容是以“{”开始的 alert("真笨,都说不要指过来了") //在“{”和“}”之间的为脚本内容，本内容是“当运行此脚本时，显示一个写着‘真笨,都说不要指过来了’的消息框” } //脚本的内容是以“}”结束的
</script> //脚本编辑完毕，结束一个Script脚本的标记
</head> //结束页面外的内容 <body leftmargin="0" rightmargin="0" bottommargin="20" topmargin="0" bgcolor="#FFFFFF" text="#000000" id="all" leftmargin="0" rightMargin=0 topmargin="0" link="#000020" vlink="#000020" alink="#000020" background=images/very_christmas/bg.gif> //开始页面内的内容
<input type=button value="菜鸟的按钮" onClick="see()"> //定义一个叫“菜鸟的按钮”的按钮，并定义当用鼠标单击这个按钮时，执行上面定义的“see()”脚本
<hr> //画一条水平线 <hr> <input type=text value="请不要用鼠标提向这里" onMouseover="baby()">//定义一个叫“请不要用鼠标提向这里”的文本框，并定义当用鼠标指向这个文本框时，执行上面定义的“baby()”脚本
</body> //结束页面内的内容 </html> //结束一个网页的标记

在<script>的代码要区分大小写，每次当我们要编写脚本时，都要先用function命令定义一个新的程序，程序名字的格式为“任意小写英文字符”+“()”,“()”中可以加入运行的参数，程序的内容包含在“{”和“}”之间，以分号“;”分隔，一个脚本内可包含多个程序，并要在<body leftmargin="0" rightmargin="0" bottommargin="20" topmargin="0" bgcolor="#FFFFFF" text="#000000" id="all" leftmargin="0" rightMargin=0 topmargin="0" link="#000020" vlink="#000020" alink="#000020" background=images/very_christmas/bg.gif>内的元素中以一定的事件激发运行这个程序，如单击事件(onClick)等。

2005/1/17 0:27:42

小轲

头衔：泥客主席

等级：校长

威望：10

文章：10704

积分：67065

第 8 楼

响应事件就是当你定义了一个脚本后,发生这个脚本所用的条件,如:你要在一个“<div>”中,定义如果这个“<div>”被鼠标单击,就执行一个名叫“save()”的脚本，可以用单击事件“onClick”，代码就写成“<div onClick="save()">”，方法和其它编程软件是一样的，有过编程经验的朋友就应该清楚了。

这个方面我也不是很了解，下面的作为今后参考学习的资料先发上来～

常用的事件一一列出：
事件：onLoad 功能：当Web浏览器加载窗口或框架集时发生适用于：<body>、<frameset>
事件：onUnLoad 功能：当Web浏览器从窗口或框架卸载一个文档时发生适用于：<body>、<frameset>
事件：onClick 功能：当一个元素被鼠标单击时发生（鼠标左键按下再松开）适用于：绝大多数元素适用
事件：onDblClick 功能：当一个元素被鼠标双击时发生适用于：绝大多数元素适用
事件：onMouseDown 功能：当鼠标在一个元素上方被按住时发生（鼠标左键按下）适用于：绝大多数元素适用
事件：onMouseUp 功能：当鼠标在一个元素上方被释放时发生（鼠标左键松开）适用于：绝大多数元素适用
事件：onMouseOver 功能：当鼠标从网页上的某处在一个元素上方经过时发生适用于：绝大多数元素适用
事件：onMouseMove 功能：当鼠标在一个元素的上方移动时发生适用于：绝大多数元素适用
事件：onMouseOut 功能：当鼠标离开一个元素时发生适用于：绝大多数元素适用
事件：onFocus 功能：当一个元素接收到来自鼠标或键盘的焦点时发生适用于：<label>、<input>、<select>、<textarea>、<button>
事件：onBlur 功能：当一个元素失去来自鼠标或键盘的焦点时发生适用于：<label>、<input>、<select>、<textarea>、<button>
事件：onKeyPress 功能：当在一个元素上方一个键被按下后和松手时发生（键值需要自定义）适用于：绝大多数元素适用
事件：onKeyDown 功能：当在一个元素上方一个键被按住不放时发生适用于：绝大多数元素适用
事件：onKeyUp 功能：当在一个元素上方一个键被松手时发生适用于：绝大多数元素适用
事件：onSubmit 功能：当一个表单被提交时发生适用于：<form>
事件：onReset 功能：当一个表单被重置时发生适用于：<form>
事件：onSelect 功能：当文本被选择时发生适用于：<input>、<textarea>
事件：onChange 功能：当一个元素丢失焦点，其值被改变时发生适用于：<input>、<select>、<textarea>

2005/1/17 0:29:38

小轲

头衔：泥客主席

等级：校长

威望：10

文章：10704

积分：67065

第 9 楼

简介一下JS和VB的区别，我们就用一个显示时间的网页分别做出JS版的VB版,其中红色部分为代码，“//”之后的内容就是该行代码意思的解释，希望大家举一反三，学会其中的语法规则。
<html><head> <title>VBScript&JavaScript的区别</title> <SCRIPT LANGUAGE="JavaScript"TYPE="text/javascript"> //定义一个JavaScript的脚本
function showdate() //定义一个名叫“showdate()”的小程序 { //程序以“{”开始 alert(Date()) //当程序被执行时，显示一个内容为当前时间的对话框，其中“alert”为显示一个对话框，括号中的为对话框的内容，“Date()”代码为当前时间。 } //程序以“}”结束
</SCRIPT> //结束这个脚本
<SCRIPT LANGUAGE="VBScript"TYPE="text/vbscript"> //定义一个VBScript的脚本
Sub Button1_OnClick //为一个名叫Button1的控件定义一个鼠标单击时发生的事件 msgbox now //当程序被执行时，显示一个内容为当前时间的对话框，其中“msgbox”为显示一个对话框（VB语言中的messagebox），now就是现在的时间 End Sub //VB有一个特点就是要配对使用，这一行就是结束这个VB事件
</SCRIPT> //结束这个脚本 </head> <body leftmargin="0" rightmargin="0" bottommargin="20" topmargin="0" bgcolor="#FFFFFF" text="#000000" id="all" leftmargin="0" rightMargin=0 topmargin="0" link="#000020" vlink="#000020" alink="#000020" background=images/very_christmas/bg.gif><form> //<form>就是一个控件的容器 <input type="button" onClick="showdate();" value="JavaScript的现在时间"> //定义一个控件，其中“type="button"”说明这个控件是一个按钮，“onClick="showdate();"”的意思是当这个控件被单击时（onClick就是单击事件），执行一个名为“showdate()”的脚本程序，value就是定义这个控件的值。 <font color=ffff00>JavaScript效果</font> //文本 </form> <form><input name="Button1" type="button" value="VBScript的现在时间"> //定义一个名叫Button1的按钮，其它属性同上 <font color=ffff00>VBScript效果</font> //文本 </form> </body></html>

2005/1/17 0:31:54

小轲

头衔：泥客主席

等级：校长

威望：10

文章：10704

积分：67065

第 10 楼

下面是一个VBscript的示例，主要是让大家了解一下script的语法用法
这个示例的内容是当鼠标指向或离开网页内的文本时，文本的颜色、字体、大小也会相应改变，是典型的响应事件
其中红色部分为代码，“//”之后的内容就是该行代码意思的解释，希望大家举一反三，学会其中的语法规则。
<html>
<head>
<title>鼠标响应事件</title> <script language="VBscript"> //定义一个脚本，代码“language”指定所用语言为“VBscript”
function MyFont_OnMouseOver() //在VBscript中定义一个名叫“MyFont”的样式，并为此样式定义一个“OnMouseOver”时发生的小程序（OnMouseOver就是当鼠标从网页上的某处在一个元素上方经过时发生的事件） MyFont.Color="Yellow"　　　　　//当这个程序被执行时，“MyFont”的文字的颜色改为黄色（和HTML一样，Color指字体颜色），格式是用点号“.”分隔，下同 MyFont.Size="6"　　　　　　　 //当这个程序被执行时，“MyFont”的文字的大小改为6号字（和HTML一样，size指字体大小） MyFont.Face="隶书"　　　　　 //当这个程序被执行时,“MyFont”的文字样式为隶书（和HTML一样，Face指字体样式） End Function　　　 //结束上述这个程序，“End”为结束，用过VB的朋友应该都知道，这是VB的配对特性
Function MyFont_OnMouseOut() //在VBscript中定义一个名叫“MyFont”的样式，并为此样式定义一个“OnMouseOut()”时发生的小程序（OnMouseOut()就是当鼠标离开一个元素时发生的事件） MyFont.Color="Red"　　　　　　//当这个程序被执行时，“MyFont”的文字的颜色改为红色（和HTML一样，Color指字体颜色） MyFont.Size="4"　　　　　　 //当这个程序被执行时，“MyFont”的文字的大小改为4号字（和HTML一样，size指字体大小） MyFont.Face="宋体"　　　　 //当这个程序被执行时,“MyFont”的文字样式为宋体（和HTML一样，Face指字体样式） End Function　　 //结束上述这个程序
</script> //结束这个脚本
</head>
<body> <font ID="MyFont" Fact="ARIAL" Size="4" color="Red"　Face="宋体">　　//定义一个文本的初始属性，并指定样式为上面定义好的“MyFont”的样式，这样，当这个文本满足了上面定义好的条件（本例是OnMouseOver和OnMouseOut()），上面相应的程序就会执行。这里和CSS的调用样式有点类似美丽的世界！<br>
　　　　　请把鼠标指向文字！<br>
　　　　　　　　　　投奔完美的世界！！！<br>　　　　　//文本内容　　　　　 <font>　　　　　　　　　　　　　　　　 //结束文本样式
</body>
</html>
从上述代码(见附件)可以看出，VBscript的格式是先定义程序，定义格式为“function”＋“样式名称（自定）”＋“_”＋发生的事件，中间为程序内容，且需要配对使用，以“End”结束，这点和VB是一样，脚本做好后，还要在相应的元素中调用，VBscript和CSS调用有点类似直接用“ID”指向就行了

<-- / message -->

2005/1/17 0:32:20

1/2页

发短信
购买论坛点券
我能做什么
我发表的主题
我参与的主题
基本资料修改
用户密码修改
联系资料修改
用户短信服务
编辑好友列表
用户收藏管理
个人文件管理
论坛通行证设置

今日贴数图例
主题数图例
总帖数图例
在线图例
在线情况
用户组在线图例

文件集浏览
图片集浏览
Flash浏览
音乐集浏览
电影集浏览
贺卡发送

页面执行时间 00.07813 秒, 4 次数据查询