个人网页设计计划书 目录

一、 网页设计目的

1.1

网页设计需求浅谈…………………………………………………… 个人网页设计目的…………………………………………………… 1.2

2.1 网页使用的工具和数据库……………………………… 浏览需求……………………………………………… 2.2

三、 个人网页功能模块设计

3.1 主页…………………………………………………………

3.2 个人简介……………………………………………………

3.3 个人相册……………………………………………………

3.4 其他模块……………………………………………………

四、个人网页的技术特点

4.1与传统的静态主页的区别……………………………………… 4.2 具体实现方法…………………………………………………………… 4.3 体会………………………………………………………………………

一、设计目的

1.1 网页设计浅谈

随着互联网的进一步发展与成熟，网络的带宽进一步加阔，网络应用也越来越广泛。网页制作更是日新月异，层出不穷。涌现了很多琳琅满目的网站，使得整个互联网多姿多彩。

以前，在网页制作的时候，通常都是使用FrontPage来完成。由于FrontPage使用方便，操作简单，即使没有网络编程经验的制作人员也可以设计出吸引人的网页，因此，很多网页设计者一直使用FrongPage。FrontPage2000集成在Office2000办公自动化软件中，其工作界面和操作风格和Word一样，因此，FrontPage相对于其他网页制作软件来说，易学易用，是网页制作初学者的入门软件。

从功能来讲，DREAMWEAVER和FrontPage各有千秋，但DREAMWEAVER自身有明显的特点：首先DREAMWEAVER引入了图层的概念，可以在DREAMWEAVER中直接制作一些动画效果。其次DREAMWEAVER支持最新的DHTML（动态HTML）标准CSS（层叠样式表单）规范。另外DREAMWEAVER具有增加插件的功能，用户可以安装各种插件来增强自己的DREAMWEAVER。最后DREAMWEAVER中又新增了资源管理器、内建参考手册。整合SourceSafe和WebDAV，集成了MacromediaExchange.其灵活方便的操作界面，也是很多人选用DREAMWEAVER的一个原因。就目前来说DREAMWEAVER已经占据网页编辑软件霸主的位置

我们再来谈谈我最喜欢的动画网页制作软件——Flash。与其说Flash是一个动画网页制作工具，还不如说它是一个功能强大的多媒体制作工具更为恰当。利用Flash可以独立制作出非常精彩的多媒体网页，包括动画的制作、声音效果的添加等。另外Flash对Internet的支持，主要表现在它采用了流控制技术，不用等整个动画的Movie下载完，就可以开始播放，对于一个Internet冲浪者来讲，这是一件很有吸引力的事情。同时Flash采用了矢量图形的制作方法，当对一副图进行任意的缩放时，它的质量并不会发生变化，而且文件很小，利于网络传输。

FIREWORK是Macromedia公司推出的图像处理软件，与其他图形处理软件的设计思想都很相似，但它又有很多自己的特色。FIREWORK是一个人完全为网页制作者设计的图形处理软件，对制作基于网络的图形有特殊的支持，能够自由的导入导出各种图像。FIREWORK作为第一款为网络实际而开发的图像处理软件，能够自动切图，生成鼠标动态感应的JavaScript。而且FIREWORK具有十分强大的动画功能和一个几乎完美的网络图像生产器。FIREWORK可以轻松辨认矢量文件中的绝大部分标记以及Photoshop文件的层。

我们读书就是为了获得知识，现在我们学习了ASP动态网页设计，当然就是要能做一个精美的网页。在此次网页设计中，我们要能更加的了解Dreameaver强大的功能和更好的使用它。通过此次设计我们还要能够知道静态网页和动态网也的区别。诚然，次此设计的个人网页，一方面是为了完成我们的考试，但更重要的是把我们所学到的东西用在具体的实践之中，所以，这次设计的目的也是要我们更好的掌握和使用好ASP的核心工具和技术，以便提高对网页知识的更深层了解。第三点也是最要的一点是，把我们在书本上学到的知识充分运用到此次设计之中。使我们的在书上学到的东西不仅仅停留在表面上，把这些东西都用在所要做的网页上面。以达到老师要求的效果和学以致用。

二、网页配置工具

2.1 使用工具和数据库

Dreameaver

主要的使用工具有：Dreanweaver 、javascript、IIS和Access.而在此次设计中主要用到Dreameaver 设置首页，编辑功能，排版功能，设计模版功能，插入文本包括插入文本元素插入图像和图文混排和外部图像的编辑等功能。关于Dreameaver的插入FLASH功能我用的比较少，在首页里我插入了一副FLASH，主要是它的功能我还不是很了解，我相信我以后会更好的使用它。

IIS

第二个主要工具就是IIS。系统不会默认安装IIS，但是我们可以通过"控制面板"中的"添加/删除程序"对话框添加。安装IIS应通过使用控制面板的"添加/删除程序"对话框，可以安装IIS、添加可选组件或者删除可选组件来实现。安装时，IIS 安装诸如通用文件、文档以及Internet信息服务管理单元等可选组件。您可以选择不安装可选组件，但是如果不选择某些组件，可能会降低IIS功能或禁用IIS服务。如果您不熟悉可选组件以及这些组件如何影响IIS，请使用默认设置安装IIS。安装结束后，可以阅读IIS联机文档中的"安装IIS可选组件"，以便获取更多信息。如果在安装了IIS后如果Web浏览器返回"找不到服务器"错误或"无法显示该页"错

误，则你可以使用命令进行测试：名称解析服务器将 IIS Web 服务器的名称解析为其 IP 地址 ，服务器响应远程计算机的网络请求。

数据库ACCESS

第三个主要的工具是数据库ACCESS，我们主要是用它来做一个数据库，然后在数据库里面建一个表，这样我们做的数据库才能显示出来。要使用数据库，我们也要像IIS那样先安装它，这个的安装很简单，和我们的WORD安装一样，我就不在详细说明里。

javascript是一种基于对像的脚本语言，每个对像均有属于自己的属性和方法。在它之中，还会经常用到的对像有String,Math,ARRAY和Date,分别用于实现对字符串，数学运算，数组，日期与时间的处理。我主要用它来实现了网页鼠标特效。

安装个人WEB服务器

ASP网页需要相应WEB服务器的支持，才能正常运行，所以在我们做网页之前应先安装个人WEB服务器即PWS。我们首先将Windows98光盘或含有PWS的光盘放到光驱中，然后双击安装程序setup.exe。当Microsoft Personal Web Sever安装程序界面出现后，直接下一步然后选择"Custom"（自定义）按钮，进入组件选择界面。在组件列表中选中"Personal Web Sever（PWS）"，然后单击"显示子组件"按钮，此时弹出安装界面。我们这时选中"文档"列表项，然后继续单击"显示子组件"按钮，此时将弹出文档安装对话框，这时选中"Active Seerver Pages"列表项，然后单击"确定"按钮，关闭该对话框并返回到上层对哈框。继续单击"确定"按钮，关闭Personal Web Sever（PWS）对话框。选中"Transaction Sever"列表项，然后单击"显示子组件"，在弹出的对话框中，将三个子组件全部选中，其它选项保持默认值，然后单击"下一步"，在弹出的安装路径对哈框中，可采取用默认安装路径，直击下一步，开始文件的复制与安装，复制完毕后，单击"完成"按钮，结束安装，此时系统将重新启动，这样PWS就安装完了。PWS安装完后，我们要测试它是否安装成功，其方法是在地址栏中输入

http:/localhost或http:/127.0.0.1,然后按回车，若能看到Personal Web Sever的欢迎界面，则安装成功。

IIS的安装与配置

若WINDOWS2000上未安装IIS服务器，可打开"控制面版"，然后单击启动"添加/删除程序"，在弹出是对话框中选择"添加/删除组件"，在WINDOWS组件向导对话框中选中"INTERNET信息服务（IIS）"，然后单击"下一步"，按 向导提示，完成对IIS的安装。启动INTERNET信息服务简称IIS，单击WINDOWS 2002 SERVER开始菜单--程序—管理工具—INTERNET服务管理器，

即启动"INTERNET信息服务"管理工具安装IIS后，系统自动创建了一个默认的WEB站点，该站点的主目录默认为C：/INETPUT/WWWROOT。用鼠标右键单击"默认WEB站点"，在弹出的快捷菜单中选中"属性"，此时就可打开站点属性设置的对话框。在对话框中可完成对属性的全部配置。我们主要设置"主目录"，单击主目录标签，切换到主目录设置页面。在本地路径（C）：中输入C：/INETPUT/WWWROOT，完成对主目录的设置。接下来我们还要设置"主页文当"，单击"文当"标签，可切换到对主页文当的设置页面。主页文当是在浏览器中键入网站的域名，我的主页文件名是"form.htm".最后把我的文当解压到"C：/INETPUT/WWWROOT"，并在主目录的本地路径中添加"form.htm"。完成以上操作后，便可以在浏览器中输入

"127.0.0.1/form.htm"就可以浏览到我的网页了。最后还要注意的是在INTERNET信息服务的工具栏中，提供有启动与停止服务的功能。单击启动按扭可启动IIS服务器：单击停止按扭，则停止IIS服务。

三、功能介绍（各模块介绍核心技术）

我的网页主要包括了主页，邮箱登陆，个人简介和爱好，个人像册，通讯录，友情连接，另类下载等。主页主要上用来显示网页的主要内容。在主页里，我嵌套了一副FLASH，在FLASH里面我又加入了一首歌，是本网页有了精美的音乐。邮箱登陆主要是用来在别人登陆该网页时有什么建议或意见，可以迅速的登陆到他的邮箱给我意见。也为别人在浏览本网页时突然想起了什么事，可以迅速登陆到自己的邮箱。个人爱好主要是用来介绍自己和介绍自己的爱好，以便让更多的人了解自己。个人像册是用来显示照片的，在个人像册里我大量使用了表格嵌套，通过做个人像册我更加的了解了网页里的表格的使用。通讯录主要是用来显示我们记录的数据的，在做同学录时，我们先要用ACCESS做一个数据库和一个数据表，再用

DREANWEAVER做一个关于通讯录的网页，然后把他们连接起来。最后我们可以通过安装的IIS来显示它。友情连接主要连接了一些重要的网站，以便别人在浏览本网页时可以方便的跳转到别的网页。另类下载模块主要显示了一些主要的下载工具和网站，方便那些想快速下载又找不到好的网站和工具的人。本网页还包括了很多东东，我就不一个一个的说明了。

四、技术特点及个人技术特点

与传统的静态主页的区别

首先Active Server Pages(动态服务器主页)的缩写,它是一个服务器端的脚本环境,在站点的Web服务器上解释脚本,可产生并执行动态、交互式、高效率的站点服务器应用程序。ASP可以胜任基于微软Web服务器的各种动态数据发布，它与传统的静态主页有很大的区别：信息系统纳入Internet的框架之后,首先要解决的问题是通过网页访问后台数据库信息而传统的不是这样。所有应用程序都是被分割为页面的形式,用户的交互操作是以提交表单等方式来实现的,这就要求Web站点具有很强的动态数据发布能力。用ASP所设计出的是动态主页,可接收用户提交的信息并作出反应, 其中的数据可随实际情况而改变,无须人工对网页文件进行更新即可满足应用需要。

软件的技术层面

从软件的技术层面看，ASP有如下的特点：无需编译ASP脚本集成于HTML当中，无需编译或链接即可直接解释执行；易于生成使用常规文本编辑器即可进行＊.asp页面的设计；独立于浏览器用户端，只要使用可解常规HTML码的浏览器，即可浏览ASP所设计的主页。

应用的层面

从应用的层面看，ASP有如下的功能：处理由浏览器传送到站点服务器的表单输入。访问和编辑服务器端的数据库表。使用浏览器即可输入、更新和删除站点服务器的数据库中的数据。读写站点服务器的文件，实现访客计数器、座右铭等功能。由cookies 读写用户端的硬盘文件，以记录用户的数据。可以实现在多个主页间共享信息，以开发复杂的商务站点应用程序。

具体实现方法

在我的网页中，主要是通过首页来实现其他的网页界面。在首页中的主要内容有：首页，个人相册，邮箱登陆，通讯录，个人简介和爱好，友情连接和另类下载。而各部分是相互链接在一起的。也就是说明了我充分的运用了DREAMWEAVER的超链接功能。在我的首有页中主要用到是嵌入和连接功能，嵌如了一张图片和连接了一副FLASH，增加了网页的精美效果的也；在我的相册中主要用到的也是超链接功能，只不过是图片的连接而已，当你点击相册中的小图片时就会在另外一张网页中出现一张放大的图片，你也可以通过像册上面的上一张，下一张，最后一张，第一张来浏览整个像册。在我的邮箱里，利用CDONTS来实现EMAIL是收发。在IIS安装了SMTP服务后，会在INTPUT目录下创建名为MAILROOT的目录，该目录是邮件服务达到根目录，在该目录下有两个名为PICKUP和DROP是子目录，CDO组件将要发送的邮件存放于PICKUP的目录下，然后SMTP服务程序将这些信息

移入QUEUE目录下并准备发送，信息通过于目标主机的连接被传送到

INTERNET上。收到的信息放在QUEUE目录中，并由SMTP服务程序将其移入DROP目录中保存，以后可由CDO组件来读出指定用户的邮件。而在通讯录中主要是通过输入数据，利用ADO对像，通过ODBC驱动程序链接字符串，可实现对任意的数据库的存取和访问。从而实现对数据库的访问，在网页上就是以分页显示的形式进行。还有一点就是在该页面可以通过一个链接，链接到另一个页面进行数据库记录的添加操作。并且可以实时更新显示。 个人体会

待续……

47号曾瑞君

 

第二篇：个人网页设计说明文档

个人网页设计说明文档

我的个人网页包括了一个主网页“index.html”以及6个与主网页相链接的网页，再向其中镶嵌一系列的图像以及背景音乐来使得个人网页增色不少，充分运用了HTML技术进行页面结构设计、CSS技术进行页面样式展示以及通过JavaScript控制动态行为来完成规范的网页制作。主题内容以“个人的简单的信息、个人的对大学的规划以及音乐”，主题内容积极健康，生机勃勃，表现出大学生的活力与激情！

我的主网页“index.html”以CSS/DIV来对网页页面进行布局,充分运用DIV对各DIV层进行定义，全局则通过CSS进行定义，对页面的布局进行分割，将整个页面分为头部(top)、导航(banner)、内容(content)、底部(bottom)4个区域。除了内容区域外，其它4个部分都属于相对固定的区域。

首先，主页面的头部是一个“光良宣传”的图片，体现了我爱音乐、喜爱光良。接下来的是个人的信息导航，介绍个人的姓名、学号、人生规划以及简单介绍了下自己，并且大学规划和我资料处还设置了超链接，分别链接到“大学规划.html”“个人简历.html”两个链接网页；接下来的是两张新颖的图片的恰当的嵌入，并且其中一张图片中还引入了三个超链接，介绍“光良”、“软件会计”、“德智体美”，各个方面描述。。。。。。

其次，在主网页内容上面层次非常清晰，内容主要是介绍自己对大学生活的感悟以及对大学生活的希冀，用表单中的多行文本输入框

对文章内容进行编辑和创作，用<textarea>标记来进行多行文本框的编译。

再往下则是一个“提问环节”的内容，该“提问环节”的内容运用了表单中的单选框，用<type="radio">来标记，后面的“提交”添加了超链接，并且使用了JavaScript对链接网页“提交成功.html”进行调用和编译.。

最后在主网页的末尾运用了滚动文字来对主网页设计的目的进行简单的介绍，使得主网页更加有层次感，更加有理念插入滚动文字所用的标记是<marquee>...</marquee>,最终以DIV定义的底部DIV层收尾，完成了个人主网页的设计！

接下来介绍各个与主网页相链接的链接网页的制作：

“光良资料.html”、“大学规划.html”、“软件会计资料.html”、“什么是德智体美.html”等4个网页与主网页“index.html”相类似，都使用了CSS/DIV进行页面格局布置。

“个人简历.html”则是一个网页表格，通过表格形式来介绍自己的个人信息以及兴趣爱好。

“提交成功.html”则是通过JavaScript来编译出来的一个网页对话框。

谢谢各位对我的第一部个人网页作品的参观与评论！

虽然做的不好，但还是谢谢大家！