基于PHP的通用企业网站系统设计 前台设计模块Word格式文档下载.docx
《基于PHP的通用企业网站系统设计 前台设计模块Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《基于PHP的通用企业网站系统设计 前台设计模块Word格式文档下载.docx（31页珍藏版）》请在冰豆网上搜索。
Abstract：
Inthe21stcentury,thehumansocietyhasenteredtheinformationtime,manyenterprisesintheworldassociatesitsownbenefitwiththeinternetinordertoincreasethecompetition,reducethecostandfurtherenhancetheproductionefficiency.Thecompanywebsiteisverypopular,manycompaniesissuestheinformationandprovidestheservicebyusingthewebsite,&
nbsp;
andpropagandizesthecorporatecultureandsetsupthecompanybrandbythewebside,unceasinglyaccumulating&
theintangibleassetforthecompany.Thisdesignisaonstagedesignofanexpresswebsite.becauseitisaonstagedesign,thecreativityandtheartdesigningtothewebsiteispaidgreatattention,togivethevisitortothewebsideaninformernewfeeling.Thisdesignisforthepurposeofstandingonthevisitor'
sangle,takingthevisitorastheleadership.Thisdesignisavoiding&
enteringthedesignerasfaraspossibletodisregardvisitor'
sdemandandthestandpoint,butnotinstillingthepropagandizeideaofthecompanyintothevisitorconstantly,forthepurposeofmaximumlimitdisplayingthefunctionofthewebsiteandbringingthebiggestbenefittotheenterprise.
KeyWords：
PageLayout;
ArtDesigning;
DesignCreativity；
第一章绪论
1.1前言
1.1.1网站开发背景
在图形化操作系统日益流行的今天，界面可以说是一个应用程序最重要最直接的部分。
对用户而言，界面就是应用程序，幕后执行的程序代码用户不关心，也感觉不到。
因此应用程序的可用性的友好性依赖于界面的设计。
并不是只有艺术家才能设计出好的界面，大多数用户界面设计原则和任何基础课程中教授的基础设计原则一样。
实际上，在计算机屏幕上组合颜色、文字等的基本原则和我们在纸张上画图一样。
网站的良好运营靠的是什么？
靠技术，肯定不是，因为技术的发展是一个相对的概念，不具有耐久性，缺乏凝聚力，如果仅仅靠这个，是不能维系整个网站发展的。
网站其实就是企业，只不过它是提供给自己的客户以不同的产品，即以网页的形式展现给他们浏览、以交互的方式让他们参与等等，既然网站是一个企业就不能回避一个问题，就是盈利的问题，如果只顾向网站投钱，作亏本生意，是那个网站都不愿意做的事情。
所以网络如果要给自己带来回报，就必须以高标准来要求，这样就不得不提升到网站文化的高度。
还是先来看一下企业文化的定义吧！
只要问一问任何一家一流的高科技企业，什么使这些企业引以自豪，十家有八家或许会告诉你，它们引以自豪的是自己的产品或服务。
剩下的两家则会举出一系列的东西，如它们的业务流程、它们的业务伙伴关系、它们的员工等等。
总之，概括起来就是：
企业文化。
什么是企业文化呢？
TerenceE.Deal（特伦斯）和AllanA.Kennedy（阿伦）合著了一部颇具影响的专著，《企业文化》（CorporateCulture）。
书中给企业文化的定义是，"
用以规范企业人多数情况下行为的一个强有力的不成文规则体系。
"
其实企业文化指的是一个企业中所有员工共有的一套观念、信念、价值和行为准则，以及由此导致的行为模式。
企业文化是以人为本的管理哲学，是把精神文明建设同企业特点和市场对企业发展的要求结合起来的一个重要形式，是借助文化力量的管理方式，良好的企业文化能为企业保持数十年的竞争优势。
可以说企业文化是企业的灵魂。
一个没有自己企业文化的企业其经营往往是随波逐流的，其员工也没有主人翁意识，这样的企业是长不了的。
纵观国内外现代化企业管理已经从以物为中心的管理转向以人为中心的管理，从而越来越突出人在企业生存和发展中的作用和力量。
企业最重要的资源是知识，而知识是人的资源，所以重视人就是重视企业最重要的资源。
IBM这样一个老牌的大公司为什么经历如此多的风风雨雨至今仍然是蓝色巨人？
HP公司为什么能保持20多年持续稳定的发展？
其答案都很简单：
重视人的建设是他们立于不败之地的保证。
1.1.2开发目的分析
本项目所要开发的是钢铁企业网站，其功能模块有：
·
网站公告模块
企业简介模块
新闻发布系统模块
产品模块（产品订单）
人才招聘模块
企业论坛模块
留言管理模块
在线调查模块
有全站搜索和产品分类搜索功能
新闻模块化
本设计在数据库中建有新闻模板表格,在新闻录入时,通过替换函数将模板内的相关内容替换为输入的内容,然后利用组件技术将替换后的代码写进新的文件中,形成一个新的新闻文件。
所以系统中所有的新闻都实在新闻模板的基础上生成的。
而新闻文件的文件名也是根据系统时间（包括年月日时分秒）自动生成,既不会产生重复，又能将时间信息在文件上体现出来。
在数据库中只存储文件的路径信息和文件名称信息,便于搜索和显示。
新闻模板化的示意图如图5.1所示:
输入信息（替换）文件生成
写入
替换定位文件
图2.1新闻模板化示意图
运行环境：
为了保证系统运行的效率和可靠性，系统服务器端应具有较高的软硬件配置，客户端的要求不是很高。
此应用程序可广泛运行于国际互联网即Internet，也可适用于内部的局域网。
其运行要求如下：
☆软件环境客户端：
Windows95/98/2000/xp/NT/2003，InternetExplorer（IE）等
服务器端：
WindowsNT/Windows2003，InternetInformationServer（IIS）5.0及其以上版本，IE等。
数据库：
采用MicrosoftSQLServer2000
☆硬件环境：
服务器CPU:
P42g以上,内存:
1g以上
客户机CPU:
P42g以上，内存：
512M以上
第二章概要设计
2.1设计任务内容
2.1.1页面概要设计分析
虽然现在的网站赖以竞争的本钱并不是靠的自己的文化，而是一些比如机遇、技术、条件等，但是现在并不能代表以后，随着社会经济和网络技术的发展，外部条件都不是问题，如果仅靠这些，网站之间的差别将变得很小，这样网站生存的价值就会变小。
所以要能够在竞争中立于不败之地，就应该坚持以人为本，挖掘网站人的潜力，让他们发挥自己的才能，使他们能够不断的超越自我，更好的凸现自己的价值。
从而形成一种合力，使网站的发展形成一种良好的机制。
在这样的情况下，网页设计就被赋予了新的内容，要求也随之提高，主要表现在几个方面：
首先就是网站的整体形象，一个网站给人的第一印象就是主页，但是绝不是说，只要主页做好了，网站的整体形象就好，因为在用户对整个网站的浏览的过程中，会自然而然的形成一种对网站的看法，这种看法是附带有感情色彩的，比如喜欢、不喜欢、没有什么感觉等，这就是整体形象的体现，这是靠主页和其它的页面相配合来完成的，所以在制作网页的时候要考虑怎么将自己网站好的一面体现给自己的用户，又要考虑体现的方式，侧重点，不能一锅端，都放在主页上，造成杂乱的形象。
而要给人以好的可以信赖的形象就必须从许多细节上入手，同时规范整个网站的外在表现，具体在于标志的设计、标准色彩的表达以及标准字体的设计。
这些都是很重要的，有一个统一的、标准的形象是赢得自己用户信赖的条件。
其次是如何在网页设计中将整个网站的员工的精神风貌体现出来，每个企业的员工其实是一分宝贵的财富，所以能够充分的将员工的精神风貌体现出来一方面可以激励他们努力的工作，热爱自己的工作，也是加强企业凝聚力的一个手段；
同时也可以通过这样的方法来赢得自己的客户的支持，在网站林立的今天，赢得自己的用户就是赢得了市场，就是获得了生存的基本条件。
再次，在网页设计的时候，需要结合网站本身的特点，提炼出自己的经营理念，摆脱低层次的网站运行模式，网站作为一个企业就必须在不断的发展壮大的时候，结合自身的文化特色，提炼出一些深层次的东西，而这些东西就是企业的灵魂，很多世界知名品牌都有自己的独特的经营理念，比如微软是"
成功诀窍=人才+创新，管理=合适的时间+应做的事"
，惠普是"
财富=人才=资本+知识"
，飞利普是"
新产品=技术内涵+观念创新"
，东芝是"
企业活力=智力×
（毅力+体力+速度）"
，麦当劳是"
企业的活力=原材料×
设备×
人力资源人力资源=人数×
能力×
态度"
。
这样就给网页设计师提出了更高的要求，要求他们能够深入的了解网站，同时将自己融入的到网站中，不断的发掘具有闪光性的东西，同时找到合适的表达方式来加以强化。
这样才能够使网站靠自身的优势获得用户的好感。
从而奠定良性运行的基础。
既然网站文化给网页设计师提出了更高的要求，那么具体到网页设计师身上该如何应对呢？
提高自身的文化素质是必不可少的，假如自身素质不高的话，就无法领会到很多其中的内涵，这样在自己的设计表达的时候就不可能到位，其实作品就是一面镜子，在其中可以折射出设计者自身的素质，这是掩盖不了的，所以提高自身的文化修养是很重要的，形成一种习惯，这样在无形中就可以在设计的作品表现出来，所以这里没有任何捷径可以走，只有在平时的生活中点点滴滴的积累。
同时要有一颗积极向上的心，对生活充满热情！
这样才可能在自己的网页设计中挖掘出好的东西来，也给自己的用户留下好的印象。
网站美工设计就是怎样把网站设计的好看一些
2.1.2数据库概念结构设计
本设计根据上面的设计规划出的实体有:
管理员信息实体﹑新闻栏目信息实体﹑新闻实体﹑新闻模板实体。
实体之间关系的E－R图如图2.2所示。
M
N
1M
N1
YNM
X
图2.2
管理员信息实体E－R图如图2.3所示。
图2.3
单条新闻实体E－R图如图2.4所示。
……
图2.4
新闻栏目实体E－R图如图2.5所示。
图2.5
新闻模板实体E－R图如图2.6所示。
图2.6
2.2网页设计的软件环境选择
2.2.1Photoshop概述
Photoshop是目前公认的最好的通用平面美术设计软件，它的功能完善，性能稳定，使用方便，所以在几乎所有的广告、出版、软件公司，Photoshop都是首选的平面工具。
功能：
是专门用来进行图像处理的软件。
通过它可以对图像修饰、对图形进行编辑，以及对图像的色彩处理，另外，还有绘图和输出功能等。
在实际生活和工作中，我们可以将数码照相机拍摄下来的照片进行编辑和修饰；
也可以将现有的图形和照片，用扫描仪扫入计算机进行加工处理；
还可以把摄像机摄入的内容转移到计算机上，然后用它实现对影像的润色。
总之，PhotoShop可以使你的图像产生特技效果，如果和其它工具软件配合使用，还可
以进行高质量的广告设计、美术创意和三维动画制作。
由于PhotoShop功能强大，目前，正在被越来越多的图像编排领域、广告和形象设计领域以及婚纱影楼等
领域广泛使用，是一个非常受欢迎的应用软件。
Photoshop在网页设计中可以发挥其强大得制图功能，设计出每个网页页面得效果图，然后把效果图切片，生成图片，为以为网页制作做好准备。
2.2.2MacromediaDreamweaver概述
Dreamweaver是由Macromedia公司推出的，用于网页开发和网站管理的专业化设计工具。
它采用了多种新技术，具有设计和开发网站过程中需要的网站管理、网站设计、页面制作、多媒体制作和动画制作等丰富实用的功能；
它具有友好的操作界面，在文档窗口中可以打开各种浮动面板，同时还可以使用系统内置的多种对象进行操作。
Dreamweaver启动后，会出现一个新的文档操作窗口,该窗口包含如下的几个部分：
标题栏、菜单栏、工作区、浮动面板和状态栏。
标题栏中主要显示该文档的标题信息、文件名及该文件所在的文件夹等；
菜单栏中包含了各种操作命令、应用特性和访问浮动面板的简单方法；
Dreamweaver启动后，工作区是白色的空白区域，可以在工作区中输入文字、插入图象、添加背景以及其它页面元素；
浮动面板提供了访问程序特性的简单方法，可以对浮动面板进行选择、拖放、重新定位、移动等操作，当我们不需要使用某个移动面板时，还可以用鼠标单击该面板右上角的关闭按钮将其关闭，需要时再打开；
状态栏位于窗口的最下端，用于显示文档的HTML标记、文档窗口大小、下载速度等信息。
MacromediaDreamweaver是一个用于可视化设计与管理网页和网站的专业级HTML编辑器。
无论你喜欢亲自书写HTML代码还是喜欢在可视化编辑环境中工作，Dreamweaver都能让您很快上手并且为你提供有用的工具来增加您的网页设计经验。
Dreamweaver包含很多编码工具和特性：
一个HTML、CSS和JavaScript参考，一个JavaScript调试器和代码编辑器（代码视图和代码检查器）。
您可以使用代码编辑器直接在Dreamweaver中编辑JavaScript、XML和其他文本文档。
Macromedia往返HTML技术可以使得在导入HTML文档时不需重新格式化代码——当然在需要的时候，您也可以让Dreamweaver清理和重新格式化HTML。
Dreamweaver中的可视化编辑功能可以让您为您的页面快速添加设计和功能，而不用写一行代码。
您可以查看您所有的站点元素或资源，并且可以直接将它们从一个易用面板中拖动到文档。
您可以程序化您的开发流程：
在photoshop中创建和编辑图象，然后直接将它们导入到Dreamweaver，或直接将您创建的Flash对象添加到Dreamweaver中。
Dreamweaver是可以完全自定义的。
您可以使用Dreamweaver创建自己的对象和命令、修改快捷键，甚至可以书写JavaScript代码，从而用自己创建的新行为、属性检查器和站点报告来扩展Dreamweaver的功能。
MacromediaDreamweaver包括各种资源来帮助您迅速学习这个程序，以使您逐渐精通于创建您自己的网站和网页。
这些资源包括一本印刷书、在线帮助页面、指导性漫游影片、一个指南和交互性课程。
您也可以在Macromedia网站的
Dreamweaver支持中心得到定期更新的技巧、技术备注、范例和信息。
首先可以通过观看指导性漫游影片来了解Dreamweaver的特性。
2.2.3MacromediaFlash简介
Flash是Macromedia公司开发的网页多媒体制作软件，向量绘图与动画编
辑功能，简易地制作连续动画、互动按钮、绘图与音效在您的网页中使用！
可以
不需要任何程序脚本即可在网页中增加交互式多媒体。
交互式的动画和影音同步
效果使网页绘图更加生动活泼，使用了Flash制作的任何对象，皆可以时间轴
与动态路径（Path-Based）的动画设计方式，由浅入深，容易学习与使用！
Flash提供了很棒的在线教学。
只有以向量为基础的Flash多媒体，才能流畅地呈现在Internet上，即使放大缩小也不降低本身质量。
ShockwaveFlash提供NetscapeNavigator使用的Plug-in（外挂程序），MicrosoftInternetExplorer的ActiveXcontrol，皆可以免费在中取得。
安装ShockwaveFlash后，任何人皆可立即在Web上看到Flash的作品。
Flash向量绘图与动画编辑所制作出来的图档及动画档，都比起您用点阵式图档或是QuickTime影片档，档案大小差了将近10倍！
它除了帮您节省档案大小，所设计出来的动画还能拥有极炫的影音互动与视觉效果喔！
极小的档案Size，您不必担心网友上您的网站会是漫长的下载时间
Flash主要有以下几点特性：
使用向量式图形技术来制作动画，它使档案容量较小（因为向量图形是使用数学函数来记录图形中的属性）；
而且将向量图放大或缩小，也不会失真，最重要的是档案容量也不会改变。
可为网页配上悦耳动听的音效，而且是以MP3的音乐压缩格式压缩，可大幅降低声音所占据的档案容量，也可保有高质量的音质。
〔可汇入WAV（WIndows）的声音档〕。
采用Stream数据流传送方式，在档案下载的同时即可流畅的播放，不须等到资料全部下载完毕才能观看动画。
提供Actions指令设定环境，可使网页作到极佳的互动性。
为了让使用者可以在完成动画之后，立即看到动画在网页中的效果，Flash
可直接将动画出版成网页，产生HTML。
具有抗锯齿的功能，可让文字或影像的边缘都非常平滑。
加强与支持点阵式图形处理（EnhancedBitmapSupport），使之可旋转、拉长等功能。
2.3网页采用的关键技术
2.3.1web界面设计概述
1、图形界面设计
本系统是基于Web的，所以系统的界面设计也就是系统网页的设计。
McromediaDreamweaverMX是McromediaDreamweaver的升级产品，它在增加了网页与数据库相连的重要功能的同时，同样秉承了传统Dreamweaver产品对网页设计的强大处理功能，用户通过在页面上仅用拖曳控件的方式就可轻松创建网页。
但若要想制作出方便实用的精美网页，必须在开始之前做出详细设计，这样就会大大提高网页质量，进一步改善应用程序的可用性。
设计时可以将设计的页面画在纸上，然后考虑哪些控件是所需要的，以及不同元素的重要性、控件之间的联系等。
页面的设计和规划不仅影响到它本身外观的艺术性，而且对应用程序的可用性也有很重要的作用。
组织页面的工作包括控件的位置、大小、一致性等。
2、控件的位置
在大多数的页面的设计中，并不是所有的元素都具有相同的重要性，精心的设计将保证较重要的元素对用户来说处在一目了然的位置。
重要的和需要经常访问的元素应当处于显著的位置，次要的元素则应当处于次要的位置。
我们习惯的阅读顺序一般是从左到右，从上到下。
可能说，用户第一眼看到的是计算机屏幕左上部分，因此最重要的元素就放在这里。
将控件和元素适当分组也是非常重要的，可以尝试根据“功能”和“关系”来组成一个逻辑信息组。
由于它们在功能上有联系，所以将它们放在一起，在视觉效果上也要比将它们分散在屏幕的各处要好得多。
在很多情况下，可以使用“表格”控件来帮助强化各控件之间的联系。
3、界面元素的一致性
一致性是界面设计中的重要因素之一，一致性的外观将体现应用程序的协调性。
如果缺乏一致性就会使界面混乱而无序，差的界面将会使应用程序看起来混乱而不严密，体现不出就应有的价值，甚至会使用户觉得应用程序不可靠。
Dreamweaver的一个非常重要的功能就是使用“样式”和“模板”来创建风格统一的页面。
Dreamweaver中的“样式”包括“HTML样式”和“CSS样式”，运用这两种样式可以对“页首文字”，“链接文字”等字体样式进行设计，然后使用这些字体样式重复设计同类的字样，这样就可以保持如“链接文字”—“上一页”、“下一页”等字体风格的一致性。
同样，将设计好的页面格式保存为“模板”，利用“模板”来创建风格统一的页面。
如在本系统中先创建好了“学生选题”系统的各层次的页面，然后将其保存为“模板”，在运用此“模板”创建其它地区系统的页面，这样就可设计出风格一致的页面系统，比如，无论在“学生选题”还是“教师出题”的“查询页面”都将是一个格式，这不仅体现在页面的布局，背景颜色，字体样式而且还体现在页面中控件的行为，属性等各方面都将一统风格，使用户在进入两个不同系统时不会感到操作陌生，不同的仅是用户自己提出的要求而已。
4、动感：
内容与形式相统一
动感是对象功能的可见线索。
虽然用户可能对这个术语还不熟悉，但动感的实例到处可见。
按下按钮、旋转旋钮和点亮电灯的开关等都能进行动感表示，一看到它们就可以看出其用处。
用户界面也广泛使用动感。
例如，用在命令按钮上的三维
升级会员 