网页设计制作课件.ppt

《网页设计制作课件.ppt》由会员分享，可在线阅读，更多相关《网页设计制作课件.ppt（91页珍藏版）》请在三一办公上搜索。

1、网页设计制作,学时：32(6+26)主讲：王红艺邮箱：使用软件：Dreamweaver、flash、fireworks等,课程目的,提高动手能力，学会网页制作图片、动画制作简单的WEB数据库编程网站配置与发布激发对网络的兴趣，提高使用和利用水平,实验安排及联系方式,实验安排可以在实验管理系统中查询飞信群：32492109,讲课提纲,一、掌握网页的相关概念：网络、Internet、网站、制作网页的基本步骤二、超文本标记语言 HTML三、网页制作四、图形编辑与动画制作五、网站设计与发布六、大作业要求,5,网页的相关概念,在制作网页之前应首先了解网络、Internet、网页、网站以及制作网页的基本步

2、骤等相关知识。计算机网络是将地理位置不同并具有独立工作能力的多个计算机系统和其他设备通过通信线路（网络介质）互连在一起，使用通用的网络协议，实现网络资源共享和互相快速通信的整个信息系统。1什么是InternetInternet 一词来源于英文 Interconnect Networks，即“互连各个网络”，中文译名为“因特网”。Internet 专指全球范围内最大的、由众多网络相互连接而成的、基于 TCP/IP 协议的计算机网络。Internet 是当今世界最大的计算机互连网络系统，由全球 100 多个国家和地区不同功能的计算机、通信骨干网和各种计算机网络通过线路连接在一起的一个世界范围的网络

3、。,6,2.TCP/IP协议TCP/IP（Transmission Control Protocol/Internet Protocol），中文译名为传输控制协议/互联网络协议），是 Internet 最基本的协议，是由底层的 IP 协议和 TCP 协议组成的。TCP/IP 协议的开发工作始于 70 年代，是用于互联网的第一套协议。TCP 和 IP 可以单独使用，但经常是协同工作，互相补充。简单地说，IP 提供了数据传输的灵活性，TCP 提供了数据传输的可靠性。,7,3.Internet地址(1)Internet地址 Internet 采用一种唯一通用的地址格式，为 Internet 中的网络

4、和主机分配一个地址。Internet 中地址类型有 IP 地址和域名地址两种。IP地址 除了可以在统一资源定位器中输入域名来访问需要的资源之外，还可以使用IP地址来进行访问。每一台上网的计算机都有一个唯一标识主机的号码，这就是IP地址。IP地址是一组32位的数字，如202.106.185.241。域名IP地址是一长串的数字号码，这些数字难记又难理解，为了方便用户理解、记忆，科学家们引入了域名的概念。域名是用一些英文字符来代替IP地址，这些英文字符一般都是英文单词，也可能是拼音字母，它们基本上和站点名称一致，因此记忆起来就十分容易了。域名的一般书写格式为主机名.机构名.地区名，如就是新浪站点的域

5、名。,8,4.万维网、网页和网站（1）什么是万维网 万维网也称做 WWW，是 World Wide Web（全球信息网）的缩写。万维网提供了非常丰富的信息，各种信息按不同的类型以网页文件的形式分别存放在万维网服务器上，供人们选择查阅。万维网 WWW 制定了一套标准，有容易掌握的超文本 HTML、统一的资源定位器 URL 和超文本传输协议（HyperText Transfer Protocol，HTTP）。浏览 WWW 必须通过浏览器来完成。浏览器是用来访问 Internet 的超文本技术，是使用最广泛的网络软件，它可以提供包括 WWW 的浏览、搜索、网络资讯的打印和收发 E-mail 的功能。

6、在浏览器中，比较有代表性的有 IE（Internet Explorer）、Netscape 和 Opera 等。还有国内腾讯公司的TT浏览器。,9,（2）网页和网站组成 WWW 的基本元素是网页，网页也称为页面或 Web 页。网页的定义 在网上浏览时看到的一个个页面就是网页。如图1-1所示即为一个网页的界面。网页的分类 按网页在一个站点中所处的位置可将其分为主页和内页（分支页面），主页是指进入一个站点时看到的第一页，内页（分支页面）是指与主页相链接的页面。按网页的表现形式可将网页分为静态网页和动态网页。,10,11,网站 通常把一系列在逻辑上可以视为一个整体的页面称做网站，或者说网站就是一个相

7、互链接的网页集合，它们可以共享。网站的概念是相对的，大网站（例如“雅虎网”和“新浪网”），页面很多，而且位于多台服务器上；小网站可以是一些个人网站，可能只有几个网页，仅在一台服务器上占据很小的空间。网站标志（Logo）利用一切可利用的视觉元素和方法针对主题概括出高度简洁并集中体现站点特色和内涵的图像与文字。在设计网站标志时，可以有代表性的人物、动物和花草作为蓝本进行设计，如新浪的眼睛标志和迪斯尼的米老鼠等。最简单的方法是用网站的英文名称作标志，如新浪用字母“sina”结合眼睛图案作为标志。,12,网站的标准色彩标准色彩用于网站的标志、标题、主菜单和主色块。网站给人的第一印象是色彩感觉，确定网站

8、的标准色彩是相当重要的一步。在进行设计时可以参考相关的同类网站或其他网站，如IBM用深蓝色、肯德基用红色、微软用钴蓝色和新浪用黄色等。网页制作基本步骤 收集整理资源规划站点内容并创建站点制作网页测试站点发布站点站点维护、更新,二、超文本标记语言 HTML(HyperText Markup Language),1.HTML 概述超文本标记语言 HTML 中的 Markup 的意思就是“设置标记”。HTML 定义了许多用于排版的命令（标签）。HTML 把各种标签嵌入到万维网的页面中。这样就构成了所谓的 HTML 文档。HTML 文档是一种可以用任何文本编辑器创建的 ASCII 码文件。,2.HTM

9、L 文档,仅当 HTML 文档是以.html 或.htm 为后缀时，浏览器才对此 文档的各种标签进行解释。如 HTML 文档改换以.txt 为其后缀，则 HTML 解释程序就不对标签进行解释，而浏览器只能看见原来的文本文件。当浏览器从服务器读取 HTML 文档后，就按照 HTML 文档中的各种标签，根据浏览器所使用的显示器的尺寸和分辨率大小，重新进行排版并恢复出所读取的页面。,HTML 的格式与标签,元素(element)是 HTML 文档结构的基本组成部分。一个 HTML 文档本身就是一个元素。每个 HTML 文档由两个主要元素组成：首部(head)和主体(body)。首部包含文档的标题(t

10、itle)，以及系统用来标识文档的一些其他信息。标题相当于文件名。文档的主体是 HTML 文档的最主要的部分。主体部分往往又由若干个更小的元素组成，如段落(paragraph)、表格(table)、和列表(list)等。,HTML 的标签,HTML用一对标签（即一个开始标签和一个结束标签）或几对标签来标识一个元素。开始标签由一个小于字符“”组成。结束标签和开始标签的区别只是在小于字符的后面要加上一个斜杠字符“/”。标签名并不区分大写和小写。有一些标签可以将结束标签省略。,HTML 文档中标签的用法,一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。这是

11、第二个段落。,HTML 文档中标签的用法,一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。这是第二个段落。,首部开始,HTML 文档中标签的用法,一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。这是第二个段落。,标题,HTML 文档中标签的用法,一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。这是第二个段落。,首部结束,HTML 文档中标签的用法,一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。这是第二个段落。,主体开始

12、,HTML 文档中标签的用法,一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。这是第二个段落。,1 级标题,一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。这是第二个段落。,HTML 文档中标签的用法,第一个段落,一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。这是第二个段落。,HTML 文档中标签的用法,第二个段落,HTML 文档中标签的用法,一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。这是第二个段落。,主体结束,

13、HTML 文档中标签的用法,一个 HTML 的例子 HTML 很容易掌握 这是第一个段落。虽然很 短，但它仍是一个段落。这是第二个段落。,HTML 文档结束,插入图像,万维网页面中的超链接1.链接到其他网点上的页面,定义一个超链的标签是。字符A表示锚(Anchor)。在HTML文档中定义一个超链的语法是：X,超链的起点,这个地方填写超链终点的 URL,链接举例,清华大学,超链的起点是某个文档中的这四个字,超链的终点是清华大学的主页,2.链接到一个本地文件,远程链接：超链的终点是其他网点上的页面。本地链接：超链指向本计算机中的某个文件。,本地链接,本地链接可进行许多的简化：协议(http:/)被

14、省略表明与当前页面的协议相同。主机域名被省略表明是当前的主机域名。目录路径被省略表明是当前目录（对于远程链接，表明是主机的默认根目录）。文件名被省略表明是当前文件（对于远程链接，表明是对方服务器上默认的文件名，通常是一个名为 index.html 的文件）。,相对路径与绝对路径,./,/default.htm,网站首页栏目2栏目2-1栏目3-1123号文件歌曲1下载,/menu3/file/file123.htm,网站首页栏目2栏目2-1栏目3-1123号文件歌曲1下载,/menu2/2-1.htm,网站首页栏目2栏目2-1栏目3-1123号文件歌曲1下载,相对路径名与绝对路径名,使用简化的

15、URL，在 HREF=的后面使用的是相对路径名。使用完整的 URL 则是使用绝对路径名。使用相对路径名的好处绝不是为了少键入一些字符而是便于目录的变更。,abc,本文件链接（页内锚）举例,X,abc,文件 F,本文件链接的 HTML 语句格式：X,本文件链接,在此处定义命名锚,起点,终点,命名锚的定义语句：,命名锚的名字,命名锚的终点在字符 abc 的前面,远程链接举例,远程链接：清华大学,清华大学主页,文件 F,远程链接,因特网,起点,终点,三、可视化网页设计,工具Macromedia Dreamweaver MX 2004Dreamweaver cs4Microsoft Frontpage

16、 2003记事本/Editplus,站点操作,建立站点为什么要建立站点？管理方便，打开方便更新链接Dreamweaver中的站点就是发布的站点吗？不是，这里仅仅是设计时的站点实验室的计算机重新启动后会自动恢复实验中每次都要重建文件建立在Student盘,38,Dreamweaver CS4简介,当今时代，网络成了最重要的媒体和资源宝库。制作网页可以选择学习HTML代码、也可以选择学习用软件来编辑、还可以两者兼用。Dreamweaver CS4是由美国Adobe公司推出的，一个可视化网页设计和网站管理工具软件。Dreamweaver CS4是一套网页编辑软件，就算没有制作网页的基础，也能很轻松地

17、利用它制作出漂亮的网页，只要从菜单、面板中直接套用就可以了，免除了学习HTML标签命令的困扰，也节省了很多编写源代码的时间。Dreamweaver CS4有强大的网站管理功能，当修改文件名、移动或删除文件时，它自动修改相关的链接；它内置FTP功能，可以直接将文件上传到网站服务器，在网站窗口中可以看到本地端和远程网站的文件，随时检查两端的差异。,39,Dreamweaver CS4的安装与启动,1、安装Dreamweaver CS4安装Dreamweaver CS4软件与前期版本稍有不同，但根据每一步的提示可以很轻松地安装，具体操作步骤如下：(1)安装前，请先关闭系统上所有目前正在执行的应用程式

18、，包括其他 Adobe 应用程式、Microsoft Office 应用程式以及浏览器视窗。也建议您在安装期间暂时关闭防毒软件。(2)将 DVD 放入光碟机中，然后依照画面上的指示进行。如果安装程式未自动启动，请浏览至光碟根目录下的 Adobe CS4 资料夹，然后双击 Setup.exe 启动安装程序(如果您是从网络下载的软件，请开启资料夹、浏览至 Adobe CS4 资料夹、双击Setup.exe)，进行初始化，如图1-2所示。,40,图1-2 初始化,41,(3)输入Dreamweaver CS4 序列号,然后单击【下一步】按钮，如图1-3所示。图1-3 输入序列号,42,(4)阅读Dr

19、eamweaver CS4许可协议，单击【接受】铵钮。(5)在显示的界面中选择要安装的Adobe组件，若安装全部组件，则单击【全选】按钮。然后单击【更改】按钮，选择安装的路径（默认的安装路径为C:Program FilesAdobe）。(6)选择好安装的路径后，单击【安装】按钮，安装程序将显示已经做好安装准备，正在安装,如图所示。,43,44,(7)完成安装进度后，显示填写注册信息，填写好注册信息，单击【立即注册】按钮，如图所示。(8)安装完毕后，会显示一个安装完成界面，单击【退出】按钮，完成Dreamweaver CS4的安装。,45,2、启动Dreamweaver CS4启动Dreamwe

20、aver CS4的操作很简单，和其它软件的启动方式基本一致。(2)单击“开始”菜单按钮，在程序组中选择【程序】【Adobe Dreamweaver CS4】命令，即可启动Dreamweaver CS4软件，如图所示。,46,(2)首次启动Dreamweaver CS4时，会弹出【默认编辑器】对话框，用户可为Dreamweaver CS4设置编辑器，如图所示。,47,(3)在此保持默认设置，单击【确定】按钮，此时将打开Adobe Dreamweaver CS4欢迎屏幕，如图所示。,48,提示：选择欢迎屏幕下方的“不再显示”复选框，再次启动欢迎屏幕即关闭，在菜单栏中选择【编辑】【首选参数】【常规】

21、【显示欢迎屏幕】命令，即可以在下次启动该软件时将重新显示欢迎屏幕。,49,Dreamweaver CS4的操作环境,和以前版本相比，Dreamweaver CS4的工作界面焕然一新，可以说是做了一次脱胎换骨的改进，从界面中可以看到更多的设计元素。另外，Dreamweaver CS4的操作环境非常灵活，用户完全可以根据自己的习惯进行定制。下面对Dreamweaver CS4的操作环境进行详细介绍。Dreamweaver CS4的工作界面由标题栏、菜单栏、插入面板、文档工具栏、文档编辑区、状态栏、属性面板、面板组、扩展管理器等组成，如图所示。,50,51,工作界面定制:用户可以根据各自的习惯进行工

22、作界面的定制，在窗口的标题栏右侧面有一个【设计器】按钮，单击它会弹出一个下拉菜单，可以定制【应用程序开发人员】、【经典】、【编码器】、【设计器】等不同的工作界面。,52,创建一个新的网站,新建站点在制作网页之前必须先在自己的计算机中新建一个新的站点和站点的本地根文件夹，站点一般由很多网页文件组成，另外还包括很多的相关文件，每个网页只有在整个网站中才能发挥作用，所以Dreamweaver CS4在提供强大的设计编写网页功能的同时，还提供了站点创建和管理功能。在新建站点之前，首先要进入【站点定义】对话框，进入【站点定义】对话框方法有下列几种：,53,1文件面板（1）文件面板中右上方的【管理站点】链

23、接，如图所示。,54,单击文件面板左上方的箭头按钮，选择弹出的下拉列表底部的【管理站点】，如图所示。,55,从上述（1）（2）方法中任选一方法都可进入【管理站点】对话框，执行【新建】【站点】，即可弹出【站点定义】对话框。,56,57,2站点菜单（1）执行【站点】菜单【新建站点】命令，即可进入【站点定义】对话框。,58,（2）执行【站点】菜单【管理站点】命令，【管理站点】对话框，再执行“新建站点”命令，也可进入【站点定义】对话框。,59,进入【站点定义】对话框后，定义本地站点的方法有下列两种：（1）利用【基本】选项卡的站点定义向导。（2）利用【高级】选项卡，这种方法比较直观快速。,60,下面详细

24、介绍一下利用【基本】选项卡，根据站点定义向导提示定义本地站点的步骤：(1)进入【站点定义】对话框后，选择【基本】选项卡（如图所示）；,61,(2)设置站点名称为“好可工作室”，在站点的URL文本框中输入网站的域名或IP地址，如果要创建本地站点，则此处可以留空。单击【下一步】按钮。(3)弹出的对话框中询问是否使用服务器技术，如图所示。由于建立的是静态网站，选择“否，我不想使用服务器技术”单选按钮，单击【下一步】按钮。,62,63,(4)在下一步对话框中，选择“编辑我的计算机上的本地副本，完成后再上传到服务器”单选 按钮。可以单击 按钮设置站点的本地根文件夹的位置，若根文件夹没预先建立好，可此时新

25、建。如图所示。选择设置好后，单击【下一步】按钮。,64,65,(5)在下一步对话框中，显示选择远程服务器连接方式的界面。在“您如何连接到远程服务器”下拉列表框中选择“无”选项，如图所示。单击【下一步】按钮。,66,(6)此时，出现确认信息界面，显示前面已经设置完成的内容，单击【完成】按钮，如图所示。,67,(7)返回到【管理站点】对话框，如图所示。单击【完成】按钮，本地站点创建完成，在【文件】面板中的【本地视图】窗口中会显示该站点的名称和根文件夹。,68,1.3.2 新建网页文件与文件夹,文件面板是管理整个网站的重要工具，它可以让人们马上看到整个网站的结构，也可以看到整个网站的文件内容，快速地

26、管理网站。在文件面板新建网页和文件夹比较方便、简单。1.新建网页文件与文件夹的操作步骤：（1）移动鼠标在文件面板中选择站点根文件夹后，单击鼠标右键，再从弹出的快捷菜单中选择“新建文件”或“新建文件夹”命令。（2）出现新建的网页文件或文件夹后，输入文件名或文件夹名称并按下回车键。,69,1.3.3打开网页文件,在Dreamweaver中有多种打开网页的方法。方法1：启动Dreamweaver后，移动鼠标在“打开最近项目”的文件列表中选择“打开”选项。方法2：移动鼠标到菜单栏选择“文件”，弹出菜单后，从菜单中选择“打开”命令。方法3：打开文件面板后，移动鼠标选择要打开的文件，双击即可打开所选择的文

27、件。另一种打开文件编辑的方法是在文件夹窗口（我的电脑）中的网页文件上单击鼠标右键，再从弹出的快捷菜单中选择“使用Dreamweaver CS4编辑”命令，也可以打开网页编辑。,70,1.3.4保存网页文件,网页不是一下子就可以做好的，做到一半时，可以先将文件保存起来，以后再随时加载修改。具体保存方法如下：1、在菜单栏中选择【文件】【保存】命令。2、出现“另存为”对话框后，从“保存在”下拉列表框中选择磁盘驱动器编号与文件夹名称，接着在文件名栏中输入文件名称，然后选择 按钮。,71,1.3.5网页版面布局,在制作网页的过程中，若是遇到较复杂的画面，可以使用编辑辅助工具，如标尺（Rulers）、网格

28、线（Grid）等，以提高制作网页的效率。1标尺 执行【查看】菜单【标尺】【显示】命令。在编辑区上出现的刻度就是标尺（如图所示），它可以作为摆放对象位置的依据。上方的刻度称为水平标尺（X轴），左边的刻度称为垂直标尺（Y轴），而原点(0,0)则是在网页的左上角，X轴若向左移动为负数，Y轴则是向上移动为负数。,72,73,2网格线 网格线主要的作用是能够更方便地排列图形位置，有了网格线就可以很快地看到对象与对象之间的间距，而这些网格线在实际浏览时是看不到的。执行【查看】菜单【网格设置】【显示网格】命令。选择显示网格线功能后，编辑区就会出现淡绿色的网格线。,74,网格线,75,若是在“网格设置”子菜单

29、中选择“靠齐到网格”命令，则在拖动对象时，对象就会自动吸附并对齐在网格线上。提示:改动网格设置只要移动鼠标到菜单栏依次选择【查看】【网格设置】【网格设置】，就可以修改成想要的样式了。,3、网页制作,表格嵌套导航条、当前位置在每个网页中的位置都要一致样式表重复劳动强度大：定义每个对象的属性一个网页定义一个样式表多个网页共用一个样式表文件新建样式表文件拿来主义,色彩的RGB表示,文字三原色 R G B每个原色色彩取值从0255（即0 x00-0 xFF）整体的色彩空间000000到FFFFFF共有2828 28 224个取值图中共有几种颜色？下列值代表何种颜色？#00FF00#FFFF00#FFF

30、FFF#000000#C0C0C0#666666,超链接的四个状态,A:link Color:#CC00CC;Text-Decoration:noneA:hover Color:#666666;Text-Decoration:underlineA:active Color:#FF0000;Text-Decoration:noneA:visited Color:#CC00CC;Text-Decoration:none如何实现“看不出哪些链接被点击过”？访问过的颜色未访问过的颜色实现方法：IE设置（只能改一台机器的默认样式）样式表,3、网页制作,服务器端包含包含文件文件扩展名：.shtm 或.as

31、p被包含文件.htm只有到之间的内容如果含有及其闭合标记，被包含之后的结果网页中就会有双份，将出错！必须发布出来才能显示即必须以http:/的方式访问具体见“五、网站设计与发布”,4、常见问题,常见操作问题：光标选中元素后，才能设置该元素的属性Table中TR和TD如何选中？状态栏：标签检查器,三、图形编辑与动画制作,图形文件格式BMP 位图色彩空间、分辨率JPG 压缩格式GIF多帧动画、透明、256色PS源文件的概念PNG矢量图的概念,四、图形编辑与动画制作,Flash动画文件矢量动画的概念flaswf编辑制作工具Adobe PhotoshopMacromedia FireworksMacr

32、omedia Flash编辑制作示例去除背景、添加文字、添加效果、导出补间动画、元件、引导线、导出,五、网站设计与发布,原理（Browser/Server模式）HTTP负责请求、回应和网页的传输服务器的任务1、等待服务3、接收请求4、解释ASP，将执行后得到的HTML结果嵌入HTML5、回应浏览器的任务2、发送请求（地址栏或点击超链接等）6、接收文档7、分析文档，做进一步请求8、解释HTML，将网页展现在IE的主体部分9、执行Javascript,四、网站设计与发布,操作系统的选择Windows Server 2003同时连接限制多站点CPU、内存优化服务而不是应用程序实验中用Windows

33、XP代替WEB服务器软件的选择Internet Information Server（Internet信息服务）,六、大作业要求,选题题目自选，可合作完成一个大的网站检查形式IIS发布，异地检查评分标准每人不少于10个页面，含首页、框架或SSI、CSS、Javascript、表单（ASP）、自制图形、自制动画主题明确、风格统一、链接正确、文件名规范整洁美观、布局合理、界面友好、导航清晰、logo和版权统一上交要求作品应小于5M，尽量控制在2M以内，压缩成一个文件文件名：专业班级_学号_姓名.rar 如：材成061_06102060104_陈松.rar）,大作业题目,设计、制作、发布网站。鼓励团

34、队开发，1-2人一组。题目自定：专业性强的门户网站科技科普、宣传介绍、历史地理、科技军事、文学艺术娱乐网页制作的心得、技巧、教程,考查内容范围,网页传输原理域名解析、域名的申请和设置指向IPHTTP请求与答复HTML语言（记事本/Editplus）可视化网页编辑（FrontPage/Dreamweaver）网站内容与结构简单的WEB数据库编程（ASP/Access/SQLServer）网站发布（PWS/IIS）团队精神,基本要求,网站类型与主题明确风格统一元素丰富，内容翔实，积极向上设计开始之前的资料收集整理，包括文字、图片、Flash等，尽量不要占用辅导机时栏目划分合理清晰，导航统一，便于浏

35、览文字流畅，便于阅读页面布局合理，版面整洁美观色彩搭配合理，图片使用得当站点发布，用http:/IP方式访问、检查,技术体现（加分因素）,统一的文件（夹）命名方案注意相对路经与绝对路径利用表格和表格的嵌套排版布局，尽量少的层（坐标绝对定位）适当的框架、页内链接及表单控件的使用（+）表单页面和表单处理页面（服务器端编程）（+）样式表（CSS）控制整体风格样式（+）服务器端包含（SSI）控制公用页面内容（+）,技术体现（加分因素）,必要的Javascript程序（如表单提交前检查内容是否符合要求）（+）功能开发文档、数据库文档、编码规范（尤其对于团队开发）（+）统一控制的数据连接（+）适当的程序模块化分与函数抽取（+）程序健壮度：容错处理（+）必要的程序注释（+）,概念区分,客户端执行的动感效果（仍属于静态网页）如本地时钟、文字图像的鼠标跟随、提交前检查表单内容Javascript服务器端执行的WEB数据库程序（动态网页）如新闻、留言、注册登录、论坛ASPAccess或SQLServer，也可以用php、.NET、JSP等技术,