静态页面转化为动态页面实现过程范文

本站小编为你精心准备了静态页面转化为动态页面实现过程参考范文，愿这些范文能点燃您思维的火花，激发您的写作灵感。欢迎深入阅读并收藏。

摘要：在静态页面和动态页面得转换过程中动态网站从功能上简单可以分成前台静态模块和后台静态模块。前面制作的效果图与编辑以及动画制作简单可以理解为静态模块，而后台模块主要采用类的解决方案有：下载免费的网站的管理平台，然后与前台整合，称之为代码融合或者所有功能完全自主开发，根据客户的要求定制，逐一实现功能

关键词：效果图静态页面代码融合动态页面得生成

1前期策划的过程

我们在进行的网站的制作之前，首先要认真浏览同类型的网站，吸取其精华好的部分，例如：其导航栏的图片的选取，网站的整体布局等等，在浏览的过程中激发自己的创作灵感，虽然每个Web站点在内容、规模、功能等方面都各有不同，但是有一个基本设计流程可以遵循。从国内的大的门户站点如搜狐、新浪到一个微不足道的个人主页，都要以基本相同的步骤来完成。首先是网站前期策划与内容组织（需求分析、风格定位、内容组织），然后效果图设计，网页编辑，动画设计，接下来是技术实现，最后是站点的与维护。这几个阶段完整地结合在一起，直到完成整个站点的工作。例如网站的制作流程。

在此制作过程中最重要在前三个步骤，在第一个步骤上要进行网站的整体设计，用户分析是第一步。众所周知，进行任务和用户分析，以及相关调研的必要性和重要性。用户是计算机资源、软件界面信息的使用者，由于目前计算机系统以及相关的信息技术应用范围很广，其用户范围也遍及各个领域。设计者必须了解各类用户的习惯、技能、知识和经验，以便预测不同类别的用户对网站界面有什么不同的需求与反映，为最终的设计提供依据和参考，使设计出的网站更适合于各类用户的使用。由于用户具有知识、视听能力、智能、记忆能力、可学习性、动机、受训练程度不同，以及又有些用户有易遗忘、易出错等特性，使得对用户的分类、分析和设计变得更加复杂化。另外，为了设计友好而又人性化的界面，也必须考虑各类不同类型用户的人文因素。许多人不愿花费时间来完成这个阶段，因为认为他们没有必要，但是必须把初始计划加入工作过程中，否则到最后当进行到已经无法再做计划的时候，就要遇到巨大的麻烦。在一开始就进行合适的计划和组织是建立一个有效的站点最重要的工作步骤。

2风格定位

首先要了解网站的类型，确定一个大致的风格走向，不同网站的风格肯定是不尽相同的，营造出各种类型的氛围，需要对各种行业有敏感的洞察力，如果设计者还不是很熟悉这个行业，不知什么样的风格是适合它的，大致该用什么样的色调和笔触，那么花一定时间先做一些调查和学习是必要的。这样可以保证在设计者的脑海里有一个较为确定的概念，并不一定会马上或明显地显露到工作中去，但是必然会对设计者的工作产生专业的影响。就业信息服务网网站是高校教育资讯类网站，他的主要用户为青年学生，同时也是信息行业的网站，所以主色采用蓝色为主色调，因为蓝色具有清凉、自由的感觉，使人们容易联想到天空、海洋、科技，通过本站传达个使用的用户以轻松、愉快、舒适的感觉。

3规划草图

草图是原创的第一构思，第一闪光；草图是表达对设计项目的理念、立意、构思。不管是寥寥数笔也好，重复勾勒也好，涂涂改改也好，但它足建筑师的思想、情绪的流露，是工作、责任的反映，是激情、感情的投入，也是苦思冥想的结晶。成功也罢，不成功也罢，它总是留住了一项项工程设计的痕迹。对于一般的网站来说，一个项目往往从一个简单的界面开始，但要把所有的东西组织到一起并不是件容易的事情。首先，要先画一个站点的草图，勾画出所有客户想要看到的东西。然后，将它详细的描述交给美工人员，让他们知道在每一屏上都要显示那些内容。如图1-3所示的是我院就业网站的草图，再此草图上，描绘了此网站所提供的若干的功能，即在此页面上提供给学生的若干的信息，使学生能够得到他们多需要的信息。对于一般的网站来说，一个项目往往从一个简单的界面开始，但要把所有的东西组织到一起并不是件容易的事情。

4规划站点结构

站点结构将决定如何去引导浏览者在站点中漫游。要结构清晰、易于导航。网站结构就像人的骨骼，构筑起网站的整体框架，虽然表现形式各异，但让人迷失终归不好，尤其是内容丰富的网站更应注意，如何合理地组织自己要的信息内容，以便浏览者能够快速、准确地检索到要找的内容，否则它就很难吸引浏览者。而且，这一步骤还将决定将要使用的命名规则。导航图和命名规则都是建立项目的主干。以后所有的工作都要由此展开。网站的目录是指建立网站时创建的目录。目录的结构是一个容易忽略的问题，大多数设计者都是未经规划、随意创建子目录。目录结构的好坏对浏览者来说并没有什么太大的感觉，但是对于站点本身的上传维护、内容未来的扩充和移植有着重要的影响。下面是建立目录结构的一些建议：

&nbs

p;4.1不要将所有文件都存放在根目录下有人为了方便，将所有文件都放在根目录下。这样造成的不利影响在于：首先，文件管理混乱。常常搞不清哪些文件需要编辑和更新，哪些无用的文件可以删除，哪些是相关联的文件，最终影响工作效率。其次，上传速度慢。服务器一般都会为根目录建立一个文件索引。当所有文件都放在根目录下，那么即使只上传更新一个文件，服务器也需要将所有文件再检索一遍，建立新的索引文件。很明显，文件量越大，等待的时间也将越长。

4.2按栏目内容建立子目录子目录的建立，首先按主菜单栏目建立。例如：本站点可以根据模块类别分别建立相应的目录，如Flash、CSS、Javascript等；企业站点可以按公司简介、产品介绍、价格、在线定单、反馈联系等建立相应目录。其他的次要栏目，类似导航，友情链接内容较多，需要经常更新的可以建立独立的子目录。而一些相关性强、不需要经常更新的栏目，例如：关于本站、联系我们、站点导航等可以合并放在一个统一目录下。所有程序一般都存放在特定目录中。为了便于维护管理，所有需要下载的内容也最好放在一个目录下。

4.3在每个主目录下都建立独立的images目录默认的一个站点根目录下都有一个images目录。这是最方便管理的。而根目录下的images目录只是用来放首页和一些次要栏目的图片。

4.4目录的层次不要太深目录的层次建议不要超过3层。原因很简单，维护管理方便。

5代码融合部分

5.1站管理平台与静态页面的整合下载后的系统是一个压缩包，不能够直接使用，所以必须进行解压，同时部分图片也需要修改。具体步骤如下：

5.1.1首先创建文件夹，然后将前面做好的静态页面index.html和flash、images、style文件夹拷贝到相关文件夹中，将下载的讯时网站管理系统“3.5News3.5.rar”也拷贝至所做的项目文件夹中。

5.1.2将“院招生就业处网站”文件夹中的讯时网站管理系统“News3.5.rar”压缩包进行解压缩至“所做文件夹中”，同时删除“News3.5.rar.”文件。

5.2程序调试现在开始调试程序，具体步骤如下：

5.2.1打开IIS，鼠标选中刚刚创建的虚拟目录“zsxx”，所示，然后鼠标打开图1-47中右侧的“admin”文件夹，选中“login.asp”文件，然后右键执行“浏览”命令

5.2.2再添加的栏目中的“模板管理”有“模板不正确”的说明，所以在此点击“公告通知”的“操作”栏中的“模板”修改模板，之后会进入模板修改页面，点击“请选择模板”下拉框，选择“一般简单模板”即可完成了“公告通知”模块的模板修改，采用同样的方法其它等模块的模板。

5.2.3现在新闻内容已经能够添加了，现在大家开始调用新闻信息，鼠标点击“代码调用”，鼠标点击“请选择栏目”下拉框，选择“政策规定模板”选项，然后显示代码调用“政策规定模板”栏目的文本信息，包字说明，以调用“公告通知”的方法。

本调用分为三种方式：

框架：

<iframename=xuasnews73src=/zsnew/newscode.asp?lm2=73&hot=0&tj=0&t=0&week=0&font=9&

line=12&lmame=0&n=30&list=10&more=1&hit=0&open=1&icon=1&new=0&bg=ffffffmarginwidth=1marginheight=1width=270height="184"scrolling="no"border="0"frameborder="0"></iframe>

JS调用：

<scriptTYPE="text/javascript"language="javascript"src="/zsnew/newscodejs.asp?

lm2=73&list=10&ion=1&tj=0&font=9&hot=0&new=1&line=2&lmame=0&open=1&n=20&more=1&t=0&week=0&zzly=0&hit=0&pls=0"charset=''''gb2312''''></script>

头条新闻调用

<scriptTYPE="text/javascript"language="javascript"src="/zsnew/admin/newscode-news.asp

?id=0&font=9&nr=0&nrtop=150&nrcolor=999999&titleface=黑体&titlesize=16&titlen=30&

titlebold=700&titlecolor=FF0000"charset=''''gb2312''''></script>

titlesize头条调用新闻有效，标题的字型大小，titlesize=16，即16pt。

titlen头条调用新闻有效，标题显示字数。

titlebold头条调用新闻有效，标题是否加粗，titlebold=700加粗，titlebold=100不加粗。

titlecolor头条调用新闻有效，标题的颜色。

以上三种方式根据情况不同调用不同的代码即可。

参考文献：

[1]陈光军，潘明辉.网站建设与管理[M].北京：北京邮电大学出版社.2006.

[2]杨明.网页编程[M].北京：科学技术出版社.2005.

[3]文伟俊.网站创意思维与flash完美结合[M].北京：电子工业出版社