网站的设计与实现.docx

网站的设计与实现.docx

《网站的设计与实现.docx》由会员分享，可在线阅读，更多相关《网站的设计与实现.docx（26页珍藏版）》请在冰点文库上搜索。

网站的设计与实现

内容摘要

在互联网飞速发展的今天，更多的企业选择了使用网络宣传自己，因为网络没有地域、时间、空间的限制，它可以实时的进行产品的宣传推广，基于让我们的公司——清青智能产品有限责任公司与业界更好的交流合作，我为我公司设计完成了这个网站，网站主要板块是首页、关于我们、相关技术、产品介绍、相关下载、解决方案、客户服务等等，此网站在建设过程中已经基本听取公司的意见，满足公司的要求，最终实现了为清青公司在互联网上的宣传推广。

关键词

DreamweaverASP时间轴

目录

第一章绪论…………………………………………………………1

1.1设计思想…………………………………………………………1

1.2开发工具的选用及介绍…………………………………………1

第二章网站总体分析…………………………………………………4

2.1网站系统分析……………………………………………………4

2.2主页分析…………………………………………………………4

2.3数据库分析………………………………………………………4

第三章网站详细设计与功能实现.……………………………………5

3.1首页的设计与实现………………………………………………5

3.2模板页的设计与实现……………………………………………18

3.3一般页面的设计与实现…………………………………………21

3.4数据库的连接……………………………………………………23

3.5时间轴及制作……………………………………………………27

结束语

参考文献

致谢

第一章绪论

在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。

Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。

因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。

为了更好的宣传我公司的产品，提高我公司在业界的知名度，特构建“清青智能产品有限责任公司”网站。

1.1设计思想

通过网站，全面宣传，展示清青公司风采、产品优点与特色，发布公司的各项相关信息，让客户更好的了解我们的公司及我们的产品，增强公司与客户之间的联系，在Internet上实现完成部分产品的销售推广，提高办事效率。

1.2开发工具的选用及介绍

此网站在设计过程中是基于MacromediaDreamweaverMX、Asp和MicrosoftAcceess三种工具实现其网站具体功能的，在此我只介绍一下前两种工具的基本功能，第三种就不作介绍了，请大家看一下关于office办公软件的书籍。

1.MacromediaDreamweaverMX

MacromediaDreamweaverMX是一种专业的HTML编辑器，用于对Web站点、Web页和Web应用程序进行设计、编码和开发。

无论您喜欢直接编写HTML代码的驾驭感还是偏爱在可视化编辑环境中工作，Dreamweaver都会为您提供帮助良多的工具，丰富您的Web创作体验。

利用Dreamweaver中的可视化编辑功能，您可以快速地创建页面而无需编写任何代码。

不过，如果您更喜欢用手工直接编码，Dreamweaver还包括许多与编码相关的工具和功能。

并且，借助Dreamweaver，您还可以使用服务器语言（例如ASP、ASP.NET、ColdFusion标记语言（CFML）、JSP和PHP）生成支持动态数据库的Web应用程序。

2.ASP

现在的动态网页技术如ASP（ACTIVESERVERPAGES）,PHP,SERVLET,等越来越常用，他们使网站的网页制作更加灵活的作用也正在变得越来越重要。

如果你不熟悉ASP,可能很想知道ASP究竟是怎么做到这一点的吧?

自互联网出现以后，网页就一直对共享信息资源，交流意见，宣传推销产品等等起着重要的作用。

但随着互联网的超高速发展，只是提供有限静态信息资源的网站很快就过时了。

一个网站的大量HTML静态网页使得对他们在同一个基本模式下的更新显得异常困难。

为了解决这个难题，各种动态网页制作技术纷纷出笼，而它们的目的是一致的：

使网页的制作更加灵活，更加容易。

而这些技术中主要有以下几个：

PHP,CGI,ASP等。

每一项技术都有自己的优缺点，作为想要成为一个称职的网页程序开发人员，自然是对它们掌握得越多越好。

而在WINDOWSNT和WINDOWS2000下的WEBSERVER（IIS）在缺省的配置下本身就可以运行ASP程序。

ASP到底能做什么？

事实是，一旦自己熟练掌握了它，那么它就能做任何你能想到的东西。

ASP能从HTML表单中收集用户资料，能与数据库连接（当然包括从数据库中读出和写入数据），甚至能用来接收和发送E-MAIL。

ASP只是一种技术，所以它不限制程序员用何种语言来描述程序员自己的脚本，其中较常用的是VBScript和JavaScript。

ASP中有很多内置的对象：

Request对象、Response对象、Server对象、Session对象、Application对象和ADO对象。

在这里面还包含了Cookie技术。

再有，ASP之所以能受到大家的重视与使用的原因，主要在于所产生的执行结果都是标准的HTML格式，而且这些程序是在网络服务端中执行，使用一般的浏览器（如IE或Netscape）就可以正确地获得ASP的“执行”结果，并且将这ASP执行的结果直接在浏览器中“浏览”。

再有，ASP易于操控数据库。

它可以轻易地通过ODBC（OpenDatabaseConnectivity）驱动程序连接各种不同的数据库，例如：

Acess、Foxpro、dBase、Oracle等等，另外，ASP亦可将“文本文件”或是”Excel”文件当成数据库用。

因为篇幅的原因，我在这里也就不一一详谈了。

了解了上面这些基础知识，我们再回过头来转入正题，这些知识对于清楚下面的系统实现就容易多了。

第二章网站总体分析

2.1网站系统分析

根据前面的设计思想进行分析，按照系统开发的基本观点对网站进行分解，从内容上可对网站作如下划分：

●公司基本信息通过首页、关于我们、客户服务、联系我们等板块来实现其功能要求，体现我公司的基本办事方针、政策、联系方法等。

●产品技术方面通过相关技术、产品介绍、相关下载、解决方案等板块来体现其产品种类、特点、技术方案等等。

●在人才上的需求通过人才招聘这个板块来具体实现招贤纳士的工作。

2.2页面分析

网站网页主要采用静、动相结合的方式，即静态的主画面和动态的图片相结合，体现公司的蒸蒸日上，除主页外，因为时间原因，其他页面基本上采用静态显示方式来展示公司的风采、产品的优点特色、信息发布，至于信息反馈页面，就得利用ASP与数据库结合的技术建立数据库管理系统，采用交互式的web画面来实现。

2.3数据库分析

采用的数据库是MicrosoftAccess，拟建立mydb.mdb库文件，在此库文件中我只需建立InfoFeedBack表文件，就可以满足此网站的需求。

第三章网站详细设计与功能实现

3.1首页的设计与实现

3.1.1功能

首页是客户登陆某公司网站与其进行交流的第一界面，他是浏览者对这个公司及产品感兴趣与否的第一印象体现者，此页面在设计过程中基本实现了这一功能——界面清晰、友好、大方，能够让客户清楚的了解公司的网站分布、各种产品及热点产品，让人有一目了然的感觉，不会说登陆某些网站让人不知道自己所要找的即关心的内容到底在哪里，产生迷路的感觉。

3.1.2版面划分

首先利用dreamweaver建立一个html页，然后，根据网站总体规划分析，首页整个页面上部分是公司名称及图片、相关链接项目，左边是公司（或者市场）现在的热门产品，随时供客户浏览、右中是企业新闻和行业动态、右下是公司的产品简介、页面最下方是公司的一些基本信息及相关行业的图标链接。

这就是整个首页的详细分布图。

设计好页面分布，下面我们要介绍一下设计过程。

3.1.3界面设计与重点、难点代码的介绍

首页在设计上基本上采用了在空白页面插入表格，即上、左、右均是插入相应的表格来把内容填充进去，然后再根据页面的美观进行相应的调整，这样经过反复预览调整，就可以把页面设计的美观大方。

下面我将附上此页的图片素材及最后设计完成的整个页面视图，如果大家想尝试一下做一个和我这个一样的网页，可以打开我的网站找到index.htm查看源程序，只要把这些程序粘贴到新的html页面，将会出现和我设计的首页一样的效果。

这幅图是贯穿整个网站的代表性图片，在每个网页都可以看到它的存在，是公司形象的象征。

在网站设计制作过程中，始终位于网页的正上方，制作之前只需插入表格然后在表格中插入图片，再根据网页的布局调整其大小。

这就完成了主页制作的第一步。

在此图片的下方，增加一行文字，也就是网站的二级页面，点击这些文字进入下一级页面，如下图所示：

下面这幅图片也是贯穿整个网站的热门产品，几乎每个网页的左边都涉及到了这部分，在网站制作过程中，先在左边插入四行表格，然后在第一行插入

，在第二行插入图片

，当然插入这些图片后都要根据这个网页布局调整大小，然后在第三行写入“新型流动警察”，上面这些做好以后，在最后一行写入新型流动警察的简单介绍，同时设置背景色，在写字时要注意字体、字号的设置，已达到整个页面的风格统一。

在此页面中，界面设计的重点就是“弹出窗口——企业新闻”。

下面来详细介绍一下。

弹出窗口的实现：

--弹出窗口-->

其中cgal_security_block文件下的程序也是实现弹出窗口重要的程序

--

document.write（''）//-->

请看效果图：

在弹出窗口显示方向是由下向上浮动显示，显示范围只是在这个框框内，如果你对某条新闻感兴趣，可以将鼠标置于其上，免得新闻还未看完就浮动到下一条新闻了，如果新闻内容有下一级链接，可以点击进入下一级页面，查看详细新闻内容。

这就是弹出窗口的主要编码、效果图及说明，使用者只要在相应的位置加入你要显示的内容就可以实现弹出显示。

这就是主页中比较重要的部分。

还有在首页添加了时间轴，时间轴在这里就先不介绍了，我会在本论文第3.5节具体介绍一下时间轴的一些知识。

弹出窗口设计好以后，页面最右边再次插入表格然后插入文字图片，这就完成了“行业动态”部分的制作，如下图所示：

到现在为止，主页中上半部分就已经基本完成了，现在需要制作产品介绍部分了，首先插入表格，根据内容决定行与列，然后写入相应的内容（图片及文字），调整行高与列宽，调整完毕如下图显示：

现在，主页的上部分已经完成，掌握了上面的设计方法，下面的设计也就很容易实现了，也是插入表格，然后再插入图片文字，调整好各自的位置大小，就可以了，请看效果图：

在这部分的制作过程中，只要注意在最下方添加背景色就可以了，其他的都是简单的插入表格，然后在表格中插入图片、内容，预览调整，直到达到感官上的满意为止。

各个部分制作完成之后，就可以欣赏整个页面的效果了，如下图所示：

3.2模板页的设计与实现

3.2.1功能

在整个站点中建立一个或几个固定的模板，然后这个模型可以在其他页面设计中反复调用先前所设计保存的模板，以提高工作效率及达到页面风格的统一。

3.2.2版面划分

在模板页的设计过程中，分析网站建设的要求，在此共建立了cpjs、gywm、khfw、jjfa、xgjs五个模板，并且每个模板根据页面布局的考虑，都尽量设计的复合整个网站要求，达到页面风格统一的效果。

在版面划分上也是与主页设计相仿。

3.2.3界面设计与重点、难点代码的介绍

在这个站点中，我设计了五个模板，每个模板都会被相应的文件夹中的一般页面套用，在这里我只重点介绍一下khfw.dwt的整体视图及制作此模板的程序。

在下图所示中，其整个页面都是一个模板，也就是说其他页可以套用下页的所有部分，套用此模板页后，只在中间部分可以自由添加内容，并且在其他页的制作过程中，模板部分是不可以更改的，只有在模板也才可以更改模板页的内容，并且只要模板页的内容改变，所有套用此模板的页面都会更新，请大家注意模板页的此项功能。

这就是模板页的效果图，下面这些是制作此页的程序，如果习惯编程的人只需编写程序就可实现上面模板的效果，这就看个人喜好问题了。

一点一点插入图片，输入文字和直接编程最终实现的内容与功能是一致的，所以这没有哪种方法好，哪种方法不好的区别，只看个人使用习惯。

请看下面程序：

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

--TemplateBeginEditablename="doctitle"-->

--TemplateEndEditable-->

--TemplateBeginEditablename="head"-->

--TemplateEndEditable-->