吉林化工学院课程设计说明书
王凤交的个人网站设计
学生学号： 10810103 学生姓名： 王凤交 专业班级： 信科 1001 指导教师： 李双远 起止日期： 2013.5.27～2013.6.8
吉林化工学院
Jilin Institute of Chemical Technology
吉林化工学院课程设计说明书
课程设计任务书
一、设计题目：王凤交网站设计 二、设计目的
1．掌握IIS 互联网信息服务平台搭建方法和实施； 2．掌握用DreamweaverCS4网页工具设计的方法；
3．熟练掌握photoshop 或fireworks 和flash 创作设计方法； 4．掌握利用html 编辑网页，了解asp 和access 的动态网页方法。 三、设计任务及要求
1.设计并实现个人网站，关于“个人网站为”主题：例如李某某的个人网站，信息内容：包括姓名、学号、个人简介、照片、爱好、家乡等栏目，需5栏目个以上展示。
2. 功能：超链接、图文展示、脚本特效、静态网页、实现asp 表单提交和数据库读取最佳。
3. 提交作品：网站源文件，图片设计模板和源文件，打包压缩包括全部文件。 4. 完成课程设计说明书
四、设计时间及进度安排
设计时间共两周（2013.5.27～2013.6.2）, 具体安排如下表：
五、指导教师评语及学生成绩
- I -
王凤交的个人网站设计
目 录
课程设计任务书 ·················································································································································· I 第1章 绪论 ······················································································································································· 1
1.1 INTERNET的历史和发展 ·················································································································· 1 1.2 网页概述 ··············································································································································· 1 第2章 开发环境软件简介 ······························································································································ 3
2.1网站设计的基本知识 ··························································································································· 3 2.2 Dreamweaver CS4简介 ························································································································ 3 2.3 HTML简介 ··········································································································································· 3 2.4 HTML技术介绍 ··································································································································· 4 2.5 ASP技术简介 ······································································································································· 4 2.6 Access简介 ··········································································································································· 5 2.7 Flash CS4 ··············································································································································· 5
2.8 Fireworks CS4········································································································································ 6 第3章 网站需求分析 ······································································································································· 7
3.1 系统概述 ··············································································································································· 7 3.2 系统的可行性分析 ······························································································································ 7 第4章 网站的设计与实现 ···························································································································· 8
4.1 ⅡS 安装与调试 ··································································································································· 8 4.2创建html··············································································································································10 4.3首页概况 ··············································································································································12 第5章 网站测试 ············································································································································· 13 第6章 结论 ····················································································································································· 14 参考文献 ··························································································································································· 15 附录 部分代码 ················································································································································· 16
- II -
吉林化工学院课程设计说明书
第1章 绪论
1.1 INTERNET的历史和发展
因特网正在改变世界，它促成了网络经济雏形的形成，特别是电子商务正由新概念走向实用化。由于因特网具有传播信息容量极大、形态多样、迅速方便、全球覆盖、自由和交互的特点，已经发展成为新的传播媒体，所以全球几乎各个企业、机构纷纷建立自己的Web 站点。
Web 站点是向用户或潜在客户提供信息(包括产品和服务) 的一种方式。其文档所包含的内容是由被称为超文本(HyperText)的文本、图形图象、声音，甚至电影等组成。使这些超文本能够有机地关联并可使浏览器识别，是通过HTML 语言(HyperText Markup Language超文本标记语言) 实现的。同时CGI(Common Gateway Interface公共网关接口) 能使Web 具有交互功能。Web 站点指引用户浏览该站点或其他站点上的分页信息，可以通过表格和电子邮件的连接提供双向交互方式。网站是未来企业开展电子商务的基础设施和信息平台，它是“知识经济”的制高点，企业的网址犹如企业的商标和品牌一样，是反映企业形象和文化的巨大的无形资产。
1.2 网页概述
1.2.1 目标明确、定位正确
Web 站点的设计是企业或机构发展战略的重要组成部分。要将企业站点作为在因特网—这个新媒体上展示企业形象、企业文化的信息空间，领导一定要给予足够的重视，明确设计站点的目的和用户需求，从而作出切实可行的计划。挑选与锤炼企业的关键信息，利用一个逻辑结构有序地组织起来，开发一个页面设计原型，选择用户代表来进行测试，并逐步精炼这个原型，形成创意。 分析有些网站的效果不如预想的好，主要原因是对用户的需求理解有偏差，缺少用户的检验造成的。设计者常常将企业的市场营销和商业目标放在首位，而对用户和潜在的用户的真正需求了解不多。所以，企业或机构应清楚地了解本网站的受众群体的基本情况，如受教育程度、收入水平、需要信息的范围及深度等。
1.2.2主题鲜明、富有特色
在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整体风格和特色作出定位，规划网站的组织结构。
Web 站点应针对所服务对象（机构或人）不同而具有不同的形式。有些站点只提供简洁文本信息；有些则采用多媒体表现手法，提供华丽的图像、闪烁的灯光、复杂的页面布置，甚至可以下载声音和录像片段。最好的Web 站点将把图形图像表现手法与有效的组织与通信结合起来。
要做到主题鲜明突出，力求简洁，要点明确，以简单明确的语言和画面告诉大家本站点的主题，吸引对本站点有需求的人的视线，对无关的人员也能留下一定的印象。对于一些行业标志和公司的标志应充分加以利用。
调动一切手段充分表现网站的个性和情趣，突出个性，办出网站的特色。
- 1 -
王凤交的个人网站设计
Web 站点主页应具备的基本成分包括：
页头：准确无误地标识你的站点和企业标志； E-mail 地址：用来接收用户垂询； 联系信息：如普通邮件地址或电话； 版权信息。
注意重复利用已有信息，如客户手册、公共关系文档、技术手册和数据库等可以轻而易举地用到企业的Web 站点中。
- 2 -
吉林化工学院课程设计说明书
第2章 开发环境软件简介
2.1网站设计的基本知识
静态编程最重要的特征就是由程序自动生成网页，最终形成供浏览器解释的HTML 。那么如何设计出精美的网页以及动态更新交互的站点，这就需要网页编程与网页制作相结合。本章主要介绍网站建设所必须掌握的基础知识，如网页文档的结构、超链接、表格和表单等基本的HTML 标识的写法要求，网页编辑的常用工具，动态网站项目工程的设计步骤要求，以及网站的发布与维护、网站的主机方案等相关知识。
2.2 Dreamweaver CS4简介
Dreamweaver [2]是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver CS4的发布，更坚定Dreamweaver[1] 在该领域的地位。它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。突出的特点主要有灵活的编写方式；可视化编辑界面；功能更多的CSS 支持——CSS 可视化设计、CSS 检查工具；动态跨浏览器验证；强大的WEB 站点管理功能；内建的图形编辑引擎；丰富的媒体支持能力等。
它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。开发人员可以使用 Dreamweaver 及所选择的服务器技术来创建功能强大的 Internet 应用程序，从而使用户能连接到数据库、Web 服务和旧式系统。开发环境支持HTML 、ASP 、ASP.NET 、JSP 等，提供众多功能强大的可视化设计工具、应用开发环境以及代码编辑支持。主要用于素材整理、排版以及后台程序的交互。
2.3 HTML简介
全称：HyperText Mark-up Language 译称：超文本标记语言。
简意：一种为普通文件中某些字句加上标识的语言，其目的在于运用标记（tag ）合文件 达到预期的效果。
HTML 是在 SGML 定义下的一个描述性的语言，或可说 HTML 是 SGML 的一个应用程式。HTML 不是程式语言，如 C++ 和 Java 之类，它只是标记语言，基本上你只要明白了各种 标记的用法便算学懂了 HTML ，HTML 的格式非常简单，只是由文字及标记组合而成，于 编辑部方面，任何文字编辑器都市可以，只要能将档案存为文本格式即可， 用专门的网页编辑工具当然更好。
- 3 -
王凤交的个人网站设计
2.4 HTML技术介绍
Macromedia [3]公司的Roundtrip HTML技术让用户可以随意导入HTML 文件而无需重新设置代码格式，用户还可以利用Dreamweaver 清除或重新格式化HTML 代码，实现代码的优化。
利用Dreamweaver ，可以方便地使用动态HTML 功能，却不需要写一行行的代码；利用它还可以检查作品在所有流行的平台和浏览器中可能发生的错误。
当然, 如果不用DW 的话, 同样可以制作出非常棒的网站来, 其实什么样的程序或者HTML 代码都可以直接用记事本来写, 只不过DW 实现起来确实方便一些吧, 还有一些其他的网页编辑工具, 比如微软的Frontpage 等等, 只是想说明一下, 做网站,DW 很好用，但是不是必须的!
2.5 ASP技术简介
ASP [1]技术 ASP （Active Server Pages动态网页）是微软公司推出的一种用以取代CGI （Common Gateway Interface通用网关接口）的技术。目前，Internet 上的许多基于Windows 平台的Web 站点已开始应用ASP 来替换CGI 。 简单地讲，ASP 是一个位于服务器端的脚本运行环境，通过这种环境，用户可以创建和运行动态的交互式Web 服务器应用程序，如交互式动态网页，包括使用HTML 表单收集和处理信息，上传与下载等等。通常情况下，用户通过浏览器看到的网页大多是静态的，目前Internet 上的许多站点，仍然提供" 静态" （static ）的主页内容。 所谓" 静态" ，指的就是站点的主页内容是" 固定不变" 的。 当浏览器通过Internet 的HTTP (Hypertext Transport Protocol)协议，向站点服务器(Web Server) 要求提供主页的内容时，站点服务器收到要求后，就传送原已设计好的静态的HTML 的文件数据给浏览器。 一个" 静态" 的站点，若要更新主页的内容，必须手动的来更新其HTML 的文件数据。而随着Web 应用的发展，用户希望能够看到根据要求而动态生成的主页，例如响应用户查询数据库的要求、生成报表等。当在浏览器上填好表单(form)的输入数据，以提供HTTP 要求时，可以在站点服务器中执行的应用程序，而不只是一个HTML 文件。站点服务器收到要求执行的应用程序，分析表单(form)的输入数据，将执行的结果以HTML 的格式传送给浏览器。 根据用户请求生成动态主页的传统方法有CGI 、ISAPI 等。CGI 是根据浏览器端的http 请求激活响应进程，每一个请求对应一个进程。当同时有很多请求时，程序挤占系统资源，造成效率低下；ISAPI 针对这一缺点进行改进，利用dll （动态链接库）技术，以线程代替进程，提高了性能和速度，但要考虑线程的同步问题，而且开发步骤烦琐。这两种技术和另一普遍使用的开发动态网页的技术Java 都还存在着另外一个问题-，那就是开发困难，程序的开发和HTML 写作是两个完全不同的过程，需要专门的程序员开发。而较简单的开发技术如javascript 和IDC(Internet Database Connector) 等功能有限，不敷使用。 ASP 使用的ActiveX 技术基于开放设计环境，用户可以自己定义和制作组件加入其中，使自己的动态网页几乎具有无限的扩充能力，这是传统的CGI 等程序所远远不及的地方。ASP 与常见的在Client 端实现动态主页的技术如Java applet、ActiveX Control、VBScript 、javascript 等不同，ASP 中的命令和Script 语句都是由服务器来解释执行的，执行结果产生动态生成的Web 页面并送到浏览器；而Client 端技术的Script 命令则是由浏览器来解释执行。由于ASP 是在服务器端解释执行，开发者可以不必考虑浏览器是否支持ASP ；同时由于它在服务器端执行，开发者也不必担心别人下载程序从而窃取编程逻辑。 ASP 通过后缀名为.asp 的ASP 文件来实现，一个.asp 文件相当于一个可执行文件，因此必须放在Web 服务器上有可执行权限的目录下。当用户
- 4 -
吉林化工学院课程设计说明书
从浏览器输入了.asp 文件的地址后，浏览器就将这个URL 请求发给Web Server ，如果Web Server 上装了ASP ，就调用ASP 。ASP 读出相应.asp 文件，解释并执行命令，动态生成一个HTML 页面回传Web Server，然后Web Server再把结果发送给浏览器。ASP 文件的制作和HTML 类似，且和HTML 开发集成，可以在同一个过程完成，利用ASP 将可以执行的脚本嵌入到HTML 文件中(将HTML 文件的后缀名改为.asp) ，这使得HTML 文件的编写与脚本的开发融合在一起。通过ASP 内置的对象、服务器组件（Server Component ）可以完成非常复杂的任务，而且用户还可以自己开发或利用别人开发的服务器组件完成专门的任务。ASP 比较网关及服务器扩展模式有着以下优点：
(1)完全与HTML 文件融合在一起；
(2)容易创建，不需要其它编译、链接程序；
(3)面向对象的并通过ActiveX Server对象可扩展。
2.6 Access简介
Access 是微软公司推出的基于Windows 的桌面关系数据库管理系统（RDBMS ，即Relational Database Management System），是Office 系列应用软件之一。它提供了表、查询、窗体、报表、页、宏、模块7种用来建立数据库系统的对象；提供了多种向导、生成器、模板，把数据存储、数据查询、界面设计、报表生成等操作规范化；为建立功能完善的数据库管理系统提供了方便，也使得普通用户不必编写代码，就可以完成大部分数据管理的任务。Access 能够存取 Access/Jet、Microsoft SQL Server、Oracle ，或者任何 ODBC 兼容数据库内的资料
2.7 Flash CS4
一个吸引人的网站一定有一个华丽的FLAH 过场动画，这样不仅给浏览者深刻的印象，同时突出了网站的特点与风格。但FLASH 相对DW 制作较复杂，设计到帧、时间轴、剪辑、按钮和actoin 语言等方面。下面是我这个FLASH 制作过程的简单介绍：
1. 虽然FLASH 采用了流控制技术，但考虑到基带网的速度和本身FLASH 的文件大小，我还是采用目前流行的先下载后观看的方式，以保证音效和动画的流畅性。并且加装了一个进度条，随时检测下载速度和时间，让浏览者做到心中有数。只有当进度达到100％时，动画开始按钮才出现，浏览者单击按钮，动画随即开始。整个下载部分的动画放在一个剪辑中，不仅节省内存，而且方便库的管理。
2.FLASH 动画设计风格为简洁、动感、时尚。 3.FLASH 影片所有素材、按钮、剪辑、声音全部导入库中，时间轴上只有各个剪辑的层，从而节约了内存，方便管理。
4. 影片导出时增加了保护功能，增加了影片的安全性，防止他人盗用修改影片。矢量图的品质为100，保证了影片图像的质量，并且声音的输出格式为mp3采样标准为128Kbps 双声道立体声，该标准接近CD 标准，这样虽然增加了影片的大小，但是保证了声音的效果。同时输出的还有影片大小报告。
- 5 -
王凤交的个人网站设计
2.8 Fireworks CS4
Firework 在网站中，除了配合Flash 处理动画里的影片以外，主要是制作导航按钮和Banner ，因为导航按钮采用的是悬停方式，所以每个按钮要同时做出两个版本。即原始状态和悬停状态。
1.Firework 在图片处理上使用了高光和阴影的效果，以突出按钮的立体感、变化感、和悬停 2.Firework 在处理Banner 的时候采用横幅与网站图标一体的方式处理，将二者整体化，不仅方便排版，也方便浏览者浏览。
3.Firewok 在处理网站上方的导航按钮时候，用代表该按钮的图片配以相应文字来处理。
4.Firework 在图片输出的时候采用JPEG （ISO 国际标准图像压缩）格式。这是目前网络较为流行的图片格式，文件小，传输速度快，图片清晰。输出品质为80，无平滑
- 6 -
第3章 网站需求分析
3.1 系统概述
在现今的信息共享的时代，网络信息化管理工作系统经信息量大、数据准确、速度快、管理工作全面等特点在现实生活中得到广泛地应用。互联网商业的普及应用已经成为网络经济的大势所趋。本章介绍的河池文化网站是建立在用户和民族信息之间的，用户可以方便、快捷地查找到自己所需要了解的有关于河池的信息，可以足不出户就能了解到河池这一个民族的基本信息，从而提高自己的阅历以及在以后生活中能够有需要的去体验民族风情。
3.2 系统的可行性分析
3.2.1实用性
网站的宗旨是根据用户需求的有关现今形势，从而提供有关的详细信息。
3.2.2技术性
网站提供给客户了了解我的的基本信息和各种历史信息，使客户能够更好的在本站内了解我的家乡。
3.2.3经济性
网站能够提供给致力于推广个人来达到所能达到的经济效益，并且能够达到预期的推广效果。
第4章 网站的设计与实现
4.1 ⅡS 安装与调试
进入Windows 7的控制面板，选择左侧的 打开或关闭Windows 功能如图4-1所示。
图4-1
把下面这张图片需要安装的服务选择，按照图片勾选功能如图4-2所示。
图4-2
安装完成后，再次进入 控制面板，选择 管理工具，双击 Internet(IIS)管理器 选项，进入IIS 设置，然后进入到IIS7控制面板如图4-3所示。
图4-3
选择Default Web Site，并双击ASP 的选项IIS7中ASP 父路径是没有启用的，要开启父路径，选择True 。配置IIS7的站点，单击右边的高级设置选项，可以设置网站的目录，如图4-4所示。
图4-4
点击右侧的绑定，设置网站的端口，如图4-5所示。
图4-5
点击默认文档，设置网站的默认文档，如图4-6所示。
图4-6
至此，Windows 7的IIS7设置已经基本完成了，ASP+Access程序可以调试成功。
4.2创建html
首先打开DW 软件建立一个站点，取名为：王凤交的个人网站，如图4-7所示。
图4-7
站点建好后，还需要在站点里创建一些文件夹，用于存放东西，将图片放在新建文件夹里。如图4-8所示。
图4-8
4.3首页概况
如图4-9所示
图4-9
第5章 网站测试
网页做完之后往往不能马上发布，还需要检验一下网页之间的链接是否正确，文件是否冗余等，有时还需要掌握整个站点的结构以备日后的修改。编码完成后就要对源程序进行测试。
网站建成后并不意味着网站建设的结束，网站内容需要不断更新， 并且网站发布前要进行细致周密的测试，以保证正常浏览和使用。主要测试内容：
1．服务器稳定性、安全性。
2．程序软件的测试。
3．网页兼容性测试，如浏览器、显示器。
4．根据需要的其他测试。
软件测试的目的在于争取在第一时间发现程序中的错误，以便于及时纠错，增加软件可靠性。它在整个系统设计实施过程中占有相当的分量。测试是软件开发时期的最后一个阶段，也是软件质量保证中至关重要的一个环节。 测试的目的是为了尽可能的发现程序中存在的错误，其任务就是消除网站故障，保证程序的可靠运行，最终把一个高质量的网站系统交给用户使用。一般来说在每个模块完成之后就要对它作必要的测试，这种测试被称为单元测试，模块的测试者也就是编写者。编码和单元测试属于网站生命周期的同一阶段。这个阶段结束之后，对网站系统还应该进行各种综合测试，这是网站生命周期的另一个独立的阶段，由专门的测试人员承担。
在网页中的测试阶段主要是对网站进行浏览器兼容性测试。在网页测试的阶段我分别安装了IE8、火狐等浏览器、360浏览器，并且进行了逐个测试。在多次实践中或多或少都遇到了不可调节的DIV 浮动问题，但是最后还是在老师的指导和书籍查阅后，嵌入表格完成了页面设计，使页面在各个浏览器中显示正常，兼容性测试表如下表 5-1所示：
第6章 结论
实践是检验真理的唯一标准，当然也是检验学习成果的标准。通过这次课程设计让我对前面学过的许多课程有了更为深刻的理解，也是我对这三年所学的东西的一个综合体现。然而这次设计让我感受颇深，它让我体会到了理论知识结合实践的重要性，光有理论知识是远远不够的。
首先，我选的课题是个人网站设计，随之而来的就是我如何来确定该网站的主题, 起初自己把问题想的过于简单了 ，总觉得只要我把主题给确定了，其他的事情也就好解决了。然而却远远不是我想的那样，当我确定了主题着手来做时，发现自己根本不知从哪着手，到底用什么来布局网站，网站的整体风格又是怎样的，如何来规划等这一系列的问题都是我极需要解决的。我开始变得有点浮躁不安，带着这样的心情来做我的设计，其结果是几天下来网站的整体布局都还没有一个统一的概念。慢慢的我就静下心来反思自己这几天所做的，发现自己的方法完全错了，太急于求成，然后我整整自己思绪，一步步来，先准备资料，画出网站的设计模型图，熟悉编程环境，把握整体布局，明确了网站的基本功能，做好业务流程图、数据流图的情况下，在设计好系统各主要部分，将一些细节问题考虑周全后才开始动手进行开发，使得后来的工作才得以顺利进行。
其次，因编程语言的熟悉程度不够也让我对整个开发过程受到了一定的阻碍。由于自己所学的东西不是很扎实，而以前只编辑过一些小的程序，对编辑大型程序不是很了解，所以自己只有去找资料，图书馆和网络给了我很大的帮助，在我徜徉书海和网络查找资料的日子里，面对无数书本和网上信息的罗列，自己有时也会感到烦躁不安，但每当自己找到了自己想要的资料时，激动和兴奋接踵而至，心里满满的只有喜悦毫无疲惫，这段旅程看似荆棘密布，实则蕴藏着无尽的宝藏，让自己了解和学习了很多以前自己根本就不知道的知识。
但总的来说，这次的课程设计为我即将踏入社会之前提供了一次锻炼的舞台。正像辅导老师说的一样，它让我对几年来所学的专业课有了更为深刻的认识，使知识得到了融会贯通，得到了比以往学习任何一门课都更大的提高和进步。所谓活到老学到老，自己以后还要加强知识的学习，不断的完善自己。经过开发这个系统，这不仅仅是一次毕业设计，不仅仅是学会了一门开发语言，更重要的是在学习的过程中，脚踏实地，认真严谨，实事求是的学习态度，不怕困难、坚持不懈、吃苦耐劳的精神是我在这次设计中最大的收益。我想这是一次意志的磨练，是对我实际能力的一次提升，也会对我未来的学习和工作有很大的帮助。
这次课程设计不能说得上是完美，但我觉自己已经尽了自己最大努力去完成，我想只要自己努力了就能对得起自己了。同时我也会在以后的时间里尽量的完善它，不断的对它进行升级，做出更好的成绩。
参考文献
[1] 杨选辉，网页设计与制作教程，清华大学出版社， 2008.8
[2] 中文版Dreamweaver CS4，龙腾科技出版，2009.5
[3]胡崧，HTML 代码效果对比学习 ，中国青年出版社， 2010.4
[4] 洪光，马希敏编著 静态网站建设， 大连理工出版社， 2008.6
[5] 胡崧，HTML 代码效果对比学习， 中国青年出版社，2010.4
附录 部分代码
无标题文档
1.0 Transitional//EN"
|
王凤交的个人网页 |
|||
|
个人简介 |
目录 |
音乐 |
爱好 |
|
吉林化工学院课程设计说明书
王凤交的个人网站设计
学生学号： 10810103 学生姓名： 王凤交 专业班级： 信科 1001 指导教师： 李双远 起止日期： 2013.5.27～2013.6.8
吉林化工学院
Jilin Institute of Chemical Technology
吉林化工学院课程设计说明书
课程设计任务书
一、设计题目：王凤交网站设计 二、设计目的
1．掌握IIS 互联网信息服务平台搭建方法和实施； 2．掌握用DreamweaverCS4网页工具设计的方法；
3．熟练掌握photoshop 或fireworks 和flash 创作设计方法； 4．掌握利用html 编辑网页，了解asp 和access 的动态网页方法。 三、设计任务及要求
1.设计并实现个人网站，关于“个人网站为”主题：例如李某某的个人网站，信息内容：包括姓名、学号、个人简介、照片、爱好、家乡等栏目，需5栏目个以上展示。
2. 功能：超链接、图文展示、脚本特效、静态网页、实现asp 表单提交和数据库读取最佳。
3. 提交作品：网站源文件，图片设计模板和源文件，打包压缩包括全部文件。 4. 完成课程设计说明书
四、设计时间及进度安排
设计时间共两周（2013.5.27～2013.6.2）, 具体安排如下表：
五、指导教师评语及学生成绩
- I -
王凤交的个人网站设计
目 录
课程设计任务书 ·················································································································································· I 第1章 绪论 ······················································································································································· 1
1.1 INTERNET的历史和发展 ·················································································································· 1 1.2 网页概述 ··············································································································································· 1 第2章 开发环境软件简介 ······························································································································ 3
2.1网站设计的基本知识 ··························································································································· 3 2.2 Dreamweaver CS4简介 ························································································································ 3 2.3 HTML简介 ··········································································································································· 3 2.4 HTML技术介绍 ··································································································································· 4 2.5 ASP技术简介 ······································································································································· 4 2.6 Access简介 ··········································································································································· 5 2.7 Flash CS4 ··············································································································································· 5
2.8 Fireworks CS4········································································································································ 6 第3章 网站需求分析 ······································································································································· 7
3.1 系统概述 ··············································································································································· 7 3.2 系统的可行性分析 ······························································································································ 7 第4章 网站的设计与实现 ···························································································································· 8
4.1 ⅡS 安装与调试 ··································································································································· 8 4.2创建html··············································································································································10 4.3首页概况 ··············································································································································12 第5章 网站测试 ············································································································································· 13 第6章 结论 ····················································································································································· 14 参考文献 ··························································································································································· 15 附录 部分代码 ················································································································································· 16
- II -
吉林化工学院课程设计说明书
第1章 绪论
1.1 INTERNET的历史和发展
因特网正在改变世界，它促成了网络经济雏形的形成，特别是电子商务正由新概念走向实用化。由于因特网具有传播信息容量极大、形态多样、迅速方便、全球覆盖、自由和交互的特点，已经发展成为新的传播媒体，所以全球几乎各个企业、机构纷纷建立自己的Web 站点。
Web 站点是向用户或潜在客户提供信息(包括产品和服务) 的一种方式。其文档所包含的内容是由被称为超文本(HyperText)的文本、图形图象、声音，甚至电影等组成。使这些超文本能够有机地关联并可使浏览器识别，是通过HTML 语言(HyperText Markup Language超文本标记语言) 实现的。同时CGI(Common Gateway Interface公共网关接口) 能使Web 具有交互功能。Web 站点指引用户浏览该站点或其他站点上的分页信息，可以通过表格和电子邮件的连接提供双向交互方式。网站是未来企业开展电子商务的基础设施和信息平台，它是“知识经济”的制高点，企业的网址犹如企业的商标和品牌一样，是反映企业形象和文化的巨大的无形资产。
1.2 网页概述
1.2.1 目标明确、定位正确
Web 站点的设计是企业或机构发展战略的重要组成部分。要将企业站点作为在因特网—这个新媒体上展示企业形象、企业文化的信息空间，领导一定要给予足够的重视，明确设计站点的目的和用户需求，从而作出切实可行的计划。挑选与锤炼企业的关键信息，利用一个逻辑结构有序地组织起来，开发一个页面设计原型，选择用户代表来进行测试，并逐步精炼这个原型，形成创意。 分析有些网站的效果不如预想的好，主要原因是对用户的需求理解有偏差，缺少用户的检验造成的。设计者常常将企业的市场营销和商业目标放在首位，而对用户和潜在的用户的真正需求了解不多。所以，企业或机构应清楚地了解本网站的受众群体的基本情况，如受教育程度、收入水平、需要信息的范围及深度等。
1.2.2主题鲜明、富有特色
在目标明确的基础上，完成网站的构思创意即总体设计方案。对网站的整体风格和特色作出定位，规划网站的组织结构。
Web 站点应针对所服务对象（机构或人）不同而具有不同的形式。有些站点只提供简洁文本信息；有些则采用多媒体表现手法，提供华丽的图像、闪烁的灯光、复杂的页面布置，甚至可以下载声音和录像片段。最好的Web 站点将把图形图像表现手法与有效的组织与通信结合起来。
要做到主题鲜明突出，力求简洁，要点明确，以简单明确的语言和画面告诉大家本站点的主题，吸引对本站点有需求的人的视线，对无关的人员也能留下一定的印象。对于一些行业标志和公司的标志应充分加以利用。
调动一切手段充分表现网站的个性和情趣，突出个性，办出网站的特色。
- 1 -
王凤交的个人网站设计
Web 站点主页应具备的基本成分包括：
页头：准确无误地标识你的站点和企业标志； E-mail 地址：用来接收用户垂询； 联系信息：如普通邮件地址或电话； 版权信息。
注意重复利用已有信息，如客户手册、公共关系文档、技术手册和数据库等可以轻而易举地用到企业的Web 站点中。
- 2 -
吉林化工学院课程设计说明书
第2章 开发环境软件简介
2.1网站设计的基本知识
静态编程最重要的特征就是由程序自动生成网页，最终形成供浏览器解释的HTML 。那么如何设计出精美的网页以及动态更新交互的站点，这就需要网页编程与网页制作相结合。本章主要介绍网站建设所必须掌握的基础知识，如网页文档的结构、超链接、表格和表单等基本的HTML 标识的写法要求，网页编辑的常用工具，动态网站项目工程的设计步骤要求，以及网站的发布与维护、网站的主机方案等相关知识。
2.2 Dreamweaver CS4简介
Dreamweaver [2]是在网页设计与制作领域中用户最多、应用最广、功能最强大的软件，随着Dreamweaver CS4的发布，更坚定Dreamweaver[1] 在该领域的地位。它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。突出的特点主要有灵活的编写方式；可视化编辑界面；功能更多的CSS 支持——CSS 可视化设计、CSS 检查工具；动态跨浏览器验证；强大的WEB 站点管理功能；内建的图形编辑引擎；丰富的媒体支持能力等。
它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。开发人员可以使用 Dreamweaver 及所选择的服务器技术来创建功能强大的 Internet 应用程序，从而使用户能连接到数据库、Web 服务和旧式系统。开发环境支持HTML 、ASP 、ASP.NET 、JSP 等，提供众多功能强大的可视化设计工具、应用开发环境以及代码编辑支持。主要用于素材整理、排版以及后台程序的交互。
2.3 HTML简介
全称：HyperText Mark-up Language 译称：超文本标记语言。
简意：一种为普通文件中某些字句加上标识的语言，其目的在于运用标记（tag ）合文件 达到预期的效果。
HTML 是在 SGML 定义下的一个描述性的语言，或可说 HTML 是 SGML 的一个应用程式。HTML 不是程式语言，如 C++ 和 Java 之类，它只是标记语言，基本上你只要明白了各种 标记的用法便算学懂了 HTML ，HTML 的格式非常简单，只是由文字及标记组合而成，于 编辑部方面，任何文字编辑器都市可以，只要能将档案存为文本格式即可， 用专门的网页编辑工具当然更好。
- 3 -
王凤交的个人网站设计
2.4 HTML技术介绍
Macromedia [3]公司的Roundtrip HTML技术让用户可以随意导入HTML 文件而无需重新设置代码格式，用户还可以利用Dreamweaver 清除或重新格式化HTML 代码，实现代码的优化。
利用Dreamweaver ，可以方便地使用动态HTML 功能，却不需要写一行行的代码；利用它还可以检查作品在所有流行的平台和浏览器中可能发生的错误。
当然, 如果不用DW 的话, 同样可以制作出非常棒的网站来, 其实什么样的程序或者HTML 代码都可以直接用记事本来写, 只不过DW 实现起来确实方便一些吧, 还有一些其他的网页编辑工具, 比如微软的Frontpage 等等, 只是想说明一下, 做网站,DW 很好用，但是不是必须的!
2.5 ASP技术简介
ASP [1]技术 ASP （Active Server Pages动态网页）是微软公司推出的一种用以取代CGI （Common Gateway Interface通用网关接口）的技术。目前，Internet 上的许多基于Windows 平台的Web 站点已开始应用ASP 来替换CGI 。 简单地讲，ASP 是一个位于服务器端的脚本运行环境，通过这种环境，用户可以创建和运行动态的交互式Web 服务器应用程序，如交互式动态网页，包括使用HTML 表单收集和处理信息，上传与下载等等。通常情况下，用户通过浏览器看到的网页大多是静态的，目前Internet 上的许多站点，仍然提供" 静态" （static ）的主页内容。 所谓" 静态" ，指的就是站点的主页内容是" 固定不变" 的。 当浏览器通过Internet 的HTTP (Hypertext Transport Protocol)协议，向站点服务器(Web Server) 要求提供主页的内容时，站点服务器收到要求后，就传送原已设计好的静态的HTML 的文件数据给浏览器。 一个" 静态" 的站点，若要更新主页的内容，必须手动的来更新其HTML 的文件数据。而随着Web 应用的发展，用户希望能够看到根据要求而动态生成的主页，例如响应用户查询数据库的要求、生成报表等。当在浏览器上填好表单(form)的输入数据，以提供HTTP 要求时，可以在站点服务器中执行的应用程序，而不只是一个HTML 文件。站点服务器收到要求执行的应用程序，分析表单(form)的输入数据，将执行的结果以HTML 的格式传送给浏览器。 根据用户请求生成动态主页的传统方法有CGI 、ISAPI 等。CGI 是根据浏览器端的http 请求激活响应进程，每一个请求对应一个进程。当同时有很多请求时，程序挤占系统资源，造成效率低下；ISAPI 针对这一缺点进行改进，利用dll （动态链接库）技术，以线程代替进程，提高了性能和速度，但要考虑线程的同步问题，而且开发步骤烦琐。这两种技术和另一普遍使用的开发动态网页的技术Java 都还存在着另外一个问题-，那就是开发困难，程序的开发和HTML 写作是两个完全不同的过程，需要专门的程序员开发。而较简单的开发技术如javascript 和IDC(Internet Database Connector) 等功能有限，不敷使用。 ASP 使用的ActiveX 技术基于开放设计环境，用户可以自己定义和制作组件加入其中，使自己的动态网页几乎具有无限的扩充能力，这是传统的CGI 等程序所远远不及的地方。ASP 与常见的在Client 端实现动态主页的技术如Java applet、ActiveX Control、VBScript 、javascript 等不同，ASP 中的命令和Script 语句都是由服务器来解释执行的，执行结果产生动态生成的Web 页面并送到浏览器；而Client 端技术的Script 命令则是由浏览器来解释执行。由于ASP 是在服务器端解释执行，开发者可以不必考虑浏览器是否支持ASP ；同时由于它在服务器端执行，开发者也不必担心别人下载程序从而窃取编程逻辑。 ASP 通过后缀名为.asp 的ASP 文件来实现，一个.asp 文件相当于一个可执行文件，因此必须放在Web 服务器上有可执行权限的目录下。当用户
- 4 -
吉林化工学院课程设计说明书
从浏览器输入了.asp 文件的地址后，浏览器就将这个URL 请求发给Web Server ，如果Web Server 上装了ASP ，就调用ASP 。ASP 读出相应.asp 文件，解释并执行命令，动态生成一个HTML 页面回传Web Server，然后Web Server再把结果发送给浏览器。ASP 文件的制作和HTML 类似，且和HTML 开发集成，可以在同一个过程完成，利用ASP 将可以执行的脚本嵌入到HTML 文件中(将HTML 文件的后缀名改为.asp) ，这使得HTML 文件的编写与脚本的开发融合在一起。通过ASP 内置的对象、服务器组件（Server Component ）可以完成非常复杂的任务，而且用户还可以自己开发或利用别人开发的服务器组件完成专门的任务。ASP 比较网关及服务器扩展模式有着以下优点：
(1)完全与HTML 文件融合在一起；
(2)容易创建，不需要其它编译、链接程序；
(3)面向对象的并通过ActiveX Server对象可扩展。
2.6 Access简介
Access 是微软公司推出的基于Windows 的桌面关系数据库管理系统（RDBMS ，即Relational Database Management System），是Office 系列应用软件之一。它提供了表、查询、窗体、报表、页、宏、模块7种用来建立数据库系统的对象；提供了多种向导、生成器、模板，把数据存储、数据查询、界面设计、报表生成等操作规范化；为建立功能完善的数据库管理系统提供了方便，也使得普通用户不必编写代码，就可以完成大部分数据管理的任务。Access 能够存取 Access/Jet、Microsoft SQL Server、Oracle ，或者任何 ODBC 兼容数据库内的资料
2.7 Flash CS4
一个吸引人的网站一定有一个华丽的FLAH 过场动画，这样不仅给浏览者深刻的印象，同时突出了网站的特点与风格。但FLASH 相对DW 制作较复杂，设计到帧、时间轴、剪辑、按钮和actoin 语言等方面。下面是我这个FLASH 制作过程的简单介绍：
1. 虽然FLASH 采用了流控制技术，但考虑到基带网的速度和本身FLASH 的文件大小，我还是采用目前流行的先下载后观看的方式，以保证音效和动画的流畅性。并且加装了一个进度条，随时检测下载速度和时间，让浏览者做到心中有数。只有当进度达到100％时，动画开始按钮才出现，浏览者单击按钮，动画随即开始。整个下载部分的动画放在一个剪辑中，不仅节省内存，而且方便库的管理。
2.FLASH 动画设计风格为简洁、动感、时尚。 3.FLASH 影片所有素材、按钮、剪辑、声音全部导入库中，时间轴上只有各个剪辑的层，从而节约了内存，方便管理。
4. 影片导出时增加了保护功能，增加了影片的安全性，防止他人盗用修改影片。矢量图的品质为100，保证了影片图像的质量，并且声音的输出格式为mp3采样标准为128Kbps 双声道立体声，该标准接近CD 标准，这样虽然增加了影片的大小，但是保证了声音的效果。同时输出的还有影片大小报告。
- 5 -
王凤交的个人网站设计
2.8 Fireworks CS4
Firework 在网站中，除了配合Flash 处理动画里的影片以外，主要是制作导航按钮和Banner ，因为导航按钮采用的是悬停方式，所以每个按钮要同时做出两个版本。即原始状态和悬停状态。
1.Firework 在图片处理上使用了高光和阴影的效果，以突出按钮的立体感、变化感、和悬停 2.Firework 在处理Banner 的时候采用横幅与网站图标一体的方式处理，将二者整体化，不仅方便排版，也方便浏览者浏览。
3.Firewok 在处理网站上方的导航按钮时候，用代表该按钮的图片配以相应文字来处理。
4.Firework 在图片输出的时候采用JPEG （ISO 国际标准图像压缩）格式。这是目前网络较为流行的图片格式，文件小，传输速度快，图片清晰。输出品质为80，无平滑
- 6 -
第3章 网站需求分析
3.1 系统概述
在现今的信息共享的时代，网络信息化管理工作系统经信息量大、数据准确、速度快、管理工作全面等特点在现实生活中得到广泛地应用。互联网商业的普及应用已经成为网络经济的大势所趋。本章介绍的河池文化网站是建立在用户和民族信息之间的，用户可以方便、快捷地查找到自己所需要了解的有关于河池的信息，可以足不出户就能了解到河池这一个民族的基本信息，从而提高自己的阅历以及在以后生活中能够有需要的去体验民族风情。
3.2 系统的可行性分析
3.2.1实用性
网站的宗旨是根据用户需求的有关现今形势，从而提供有关的详细信息。
3.2.2技术性
网站提供给客户了了解我的的基本信息和各种历史信息，使客户能够更好的在本站内了解我的家乡。
3.2.3经济性
网站能够提供给致力于推广个人来达到所能达到的经济效益，并且能够达到预期的推广效果。
第4章 网站的设计与实现
4.1 ⅡS 安装与调试
进入Windows 7的控制面板，选择左侧的 打开或关闭Windows 功能如图4-1所示。
图4-1
把下面这张图片需要安装的服务选择，按照图片勾选功能如图4-2所示。
图4-2
安装完成后，再次进入 控制面板，选择 管理工具，双击 Internet(IIS)管理器 选项，进入IIS 设置，然后进入到IIS7控制面板如图4-3所示。
图4-3
选择Default Web Site，并双击ASP 的选项IIS7中ASP 父路径是没有启用的，要开启父路径，选择True 。配置IIS7的站点，单击右边的高级设置选项，可以设置网站的目录，如图4-4所示。
图4-4
点击右侧的绑定，设置网站的端口，如图4-5所示。
图4-5
点击默认文档，设置网站的默认文档，如图4-6所示。
图4-6
至此，Windows 7的IIS7设置已经基本完成了，ASP+Access程序可以调试成功。
4.2创建html
首先打开DW 软件建立一个站点，取名为：王凤交的个人网站，如图4-7所示。
图4-7
站点建好后，还需要在站点里创建一些文件夹，用于存放东西，将图片放在新建文件夹里。如图4-8所示。
图4-8
4.3首页概况
如图4-9所示
图4-9
第5章 网站测试
网页做完之后往往不能马上发布，还需要检验一下网页之间的链接是否正确，文件是否冗余等，有时还需要掌握整个站点的结构以备日后的修改。编码完成后就要对源程序进行测试。
网站建成后并不意味着网站建设的结束，网站内容需要不断更新， 并且网站发布前要进行细致周密的测试，以保证正常浏览和使用。主要测试内容：
1．服务器稳定性、安全性。
2．程序软件的测试。
3．网页兼容性测试，如浏览器、显示器。
4．根据需要的其他测试。
软件测试的目的在于争取在第一时间发现程序中的错误，以便于及时纠错，增加软件可靠性。它在整个系统设计实施过程中占有相当的分量。测试是软件开发时期的最后一个阶段，也是软件质量保证中至关重要的一个环节。 测试的目的是为了尽可能的发现程序中存在的错误，其任务就是消除网站故障，保证程序的可靠运行，最终把一个高质量的网站系统交给用户使用。一般来说在每个模块完成之后就要对它作必要的测试，这种测试被称为单元测试，模块的测试者也就是编写者。编码和单元测试属于网站生命周期的同一阶段。这个阶段结束之后，对网站系统还应该进行各种综合测试，这是网站生命周期的另一个独立的阶段，由专门的测试人员承担。
在网页中的测试阶段主要是对网站进行浏览器兼容性测试。在网页测试的阶段我分别安装了IE8、火狐等浏览器、360浏览器，并且进行了逐个测试。在多次实践中或多或少都遇到了不可调节的DIV 浮动问题，但是最后还是在老师的指导和书籍查阅后，嵌入表格完成了页面设计，使页面在各个浏览器中显示正常，兼容性测试表如下表 5-1所示：
第6章 结论
实践是检验真理的唯一标准，当然也是检验学习成果的标准。通过这次课程设计让我对前面学过的许多课程有了更为深刻的理解，也是我对这三年所学的东西的一个综合体现。然而这次设计让我感受颇深，它让我体会到了理论知识结合实践的重要性，光有理论知识是远远不够的。
首先，我选的课题是个人网站设计，随之而来的就是我如何来确定该网站的主题, 起初自己把问题想的过于简单了 ，总觉得只要我把主题给确定了，其他的事情也就好解决了。然而却远远不是我想的那样，当我确定了主题着手来做时，发现自己根本不知从哪着手，到底用什么来布局网站，网站的整体风格又是怎样的，如何来规划等这一系列的问题都是我极需要解决的。我开始变得有点浮躁不安，带着这样的心情来做我的设计，其结果是几天下来网站的整体布局都还没有一个统一的概念。慢慢的我就静下心来反思自己这几天所做的，发现自己的方法完全错了，太急于求成，然后我整整自己思绪，一步步来，先准备资料，画出网站的设计模型图，熟悉编程环境，把握整体布局，明确了网站的基本功能，做好业务流程图、数据流图的情况下，在设计好系统各主要部分，将一些细节问题考虑周全后才开始动手进行开发，使得后来的工作才得以顺利进行。
其次，因编程语言的熟悉程度不够也让我对整个开发过程受到了一定的阻碍。由于自己所学的东西不是很扎实，而以前只编辑过一些小的程序，对编辑大型程序不是很了解，所以自己只有去找资料，图书馆和网络给了我很大的帮助，在我徜徉书海和网络查找资料的日子里，面对无数书本和网上信息的罗列，自己有时也会感到烦躁不安，但每当自己找到了自己想要的资料时，激动和兴奋接踵而至，心里满满的只有喜悦毫无疲惫，这段旅程看似荆棘密布，实则蕴藏着无尽的宝藏，让自己了解和学习了很多以前自己根本就不知道的知识。
但总的来说，这次的课程设计为我即将踏入社会之前提供了一次锻炼的舞台。正像辅导老师说的一样，它让我对几年来所学的专业课有了更为深刻的认识，使知识得到了融会贯通，得到了比以往学习任何一门课都更大的提高和进步。所谓活到老学到老，自己以后还要加强知识的学习，不断的完善自己。经过开发这个系统，这不仅仅是一次毕业设计，不仅仅是学会了一门开发语言，更重要的是在学习的过程中，脚踏实地，认真严谨，实事求是的学习态度，不怕困难、坚持不懈、吃苦耐劳的精神是我在这次设计中最大的收益。我想这是一次意志的磨练，是对我实际能力的一次提升，也会对我未来的学习和工作有很大的帮助。
这次课程设计不能说得上是完美，但我觉自己已经尽了自己最大努力去完成，我想只要自己努力了就能对得起自己了。同时我也会在以后的时间里尽量的完善它，不断的对它进行升级，做出更好的成绩。
参考文献
[1] 杨选辉，网页设计与制作教程，清华大学出版社， 2008.8
[2] 中文版Dreamweaver CS4，龙腾科技出版，2009.5
[3]胡崧，HTML 代码效果对比学习 ，中国青年出版社， 2010.4
[4] 洪光，马希敏编著 静态网站建设， 大连理工出版社， 2008.6
[5] 胡崧，HTML 代码效果对比学习， 中国青年出版社，2010.4
附录 部分代码
无标题文档
1.0 Transitional//EN"
|
王凤交的个人网页 |
|||
|
个人简介 |
目录 |
音乐 |
爱好 |
|