在网站开发中页面内容的布局、页面间的跳转、页面间的数据通信是关键, 只要能够熟练使用这几个部分, 网站开发就可事半功倍。
一个网站能否吸引用户的眼球, 页面布局显得尤为重要。组成网页的基本要素包括图片、文字和链接, 复杂一点的就是加上flash动画和视频, 布局就是如何把这些原始的图片、文字和链接有机的组织起来。同样的原始资料, 不同的人组织出来的网页效果可能有非常大的差异, 获得的产能也可能是千差万别的, 这个需要设计人员要有好的美术功底以及良好的审美观, 除开这些, 作为一个设计人员还需要丰富的行业经验并且能够准确把握客户的心理。这些对很多程序人员来说都不具备太多的优势, 一般这个任务都有专业美工来完成设计。这里就不再讨论, 但开发人员也应该掌握基本的photoshop图片处理和css+div布局、table布局等。
一个网站有许多网页, 每个页面的功能各异, 如何从一个页面到另外一个页面, 把所有功能组织起来, 这就需要熟悉页面间的跳转, 同时还要在合适的地方使用合适的页面间跳转方式。
静态链接就是使用a标签实现跳转。在浏览许多网站的时候, 首页中看到的新闻分类, 新闻介绍, 友情链接, 这些都是由静态链接地址实现, 但它们进行了分门别类, 在国际新闻都是国际新闻的链接, 在国内新闻都是国内新闻的链接, 只要点击相应的栏目, 就可以跳转到对应的新闻进行浏览。
在html的head头文件中使用meta的http-equiv的refresh属性同时制定页面刷新的延迟时间和目标页面就可以, 在指定的时间里用目标页面来替换当前页面。在javascript脚本中可以依靠改变window.location.href来替换当前页面的引用页面, 来实现页面的跳转。
静态链接也可以打开新的页面, 要指定合适的target;javascript中可以使用window.open () 函数来打开一个新的浏览窗口页面, 也可以使用window.show Modal Dialog () 函数弹出一个页面窗口实现页面的跳转, 这两种方式的区别是, 使用open () 打开的页面的活动状态可以跟打开它的页面进行切换, open () 函数后面的语句在执行完open () 函数后会继续执行。show Modal Dialog () 函数是被打开的页面窗口不能与打开窗口互换激活状态, 意思是打开新浏览页面后, 在没有关闭新页面之前不能对原来的页面就行操作, 同时, 在没有关闭打开页面的时候show Modal Dialog () 函数后面的代码不会执行。
像邮箱登录, 注册用户信息等都可以依靠指定表单的action来指定目标网址, 要跳转的时候可以点击类型为“submit”的表单按钮进行提交, 也可也在javascript代码中执行表单的submit方法去提交表单从而实现表单的跳转。
这包括两种方式, 一种为调用html标签中的页面刷新, 另一种就是调用php自带的页面跳转函数。二者的区别在于调用的时机, 对于跳转需要延时的和已经往客户页面发送了数据的, 就只能使用第一种调用html标签中的页面刷新进行跳转, 即调用, <meta http-equiv=”refresh”content=”延迟刷新时间;url:目标地址”/>延迟刷新时间以秒为单位;剩下的情况就可以使用header () 函数进行跳转, 假如我们要跳转到index.php页面, 可这样调用header函数:header (”location:index.php”) ;
对于静态网站来说, 掌握页面的跳转, 已经没有问题了, 但现在是信息化社会, 信息更新非常快, 静态网站几乎没有了, 要让网页具有生命力和市场竞争力, 必须让它信息及时更新, 随时反映或传达出客户要求的, 突出重点信息, 定制用户的真正要求等, 这就要必须明白页面时如何通信的, 如何传达指令, 如何接收信息, 然后做出相应的反应, 这就是通信。页面间数据通信包括以下几种情况:
如在客户端对用户输入的表单数据的有效性验证, 或对客户端数据的进行相应处理, 如何让界面上各个事件协同操作。要解决这个问题开发人员就要明白在客户端怎样获取客户数据, 还有就是对处理的中间数据或结果数据怎样放置, 便于另外的操作事件调用或向服务器端程序提交处理结果。这些可以使用javascript实现, 在javascript中调用document.get Element By Id函数来根据html表单控件或标签中的id属性来获得相应的对象。也可以通过分析处理html文档节点结构来获取需要的数据。有些数据可以存放到表单隐含域控件中进行中转。每次要使用的时候先获取它。
不借助服务器后台程序, 客户端两个页面间通信也依靠javascript程序。下面谈下页面用window.open () 函数打开的子页面间的数据通讯, 和页面用window.show Modal Dialog () 打开的网页间的数据通信。
使用window.open () 函数打开的子页面, 在父页面中要访问子页面的信息, 需要在打开的目标页面的时候获得目标对象, 如var win=window.open (“目标页面”) ;通过使用对象变量win就可以访问和设置子页面中的元素。代码:win.txtcode.value, 就表示访问子页面中id为“txtcode”表单控件的值。在子页面中则直接可以使用opener对象访问和设置父页面信息, opener代表父页面的实例变量。代码:opener.txtparent.value=“子页面数据”;就表示在子页面中给父页面中id为“txtparent”表单控件赋值。
页面使用window.show Modal Dialog打开子页面, 调用show Modal Dialog函数时, 不会像open生成子页面对象, 但可以接收子页面处理后返回的数据。代码:var res=show Modal D ialog ("show Modal Dialog.htm") ;res将会是调用子页面执行完后返回给父页面的数据。在子页面中返回的数据只需要赋值给parent.return Value即可。
大部分动态网站都属于这种情况, 比如要把界面数据写入数据库, 或要根据客户条件提取对应的数据信息等。要把数据传递到后台服务器, 可以通过url组织数据, 数据放在网页后面以问号 (?) 开始, 为键值对, 每个键值对之间使用&符号隔离;还有就是使用表单提交, 表单有两种方式:一种是使用get方式, 数据组织称url格式;还有一种是post格式表单中的数据作为一个整体数据进行传递。这些都会对客户端网页进行整体刷新, 若要对客户端页面进行局部刷新, 可以使用ajax技术, 其只需要传递服务器端需要的关键值, 数据的传递依然使用的url组织, 后台的数据可以直接返回, 要是多条数据的话可以组织出json格式的数据, 再进行处理。常用的ajax框架有jquery、extjs、xajax等等。
在网站开发中, 有时需要一定的全局变量, 用来暂时或一个时限内保持一种状态, 便于网站内各个页面在访问的时候, 不需要从一个页面到另外一个页面的时候都传递数据。如保持用户登录状态, 记录用户的合法权限, 阻止用户非法链接, 跟踪用户等, 这就可以使用cookie机制或session会话机制, 可以把信息存入其中。如在登录的时候, 可以把登录用户, 登录密码存入cookie中, 设定时限, 在有效期内, 用户再次登录的时候就可以不再输入密码信息。还有如果网站管理页面, 不允许用户未登录就进行访问, 可以使用session会话存放用户是否登录状态, 从而来判断是否给予用户访问。
页面布局、页面间跳转、页面间的通信, 是解决客户能看什么, 以什么形式看, 客户怎样表达的想法, 网站怎样明白客户的需要, 网站如何把客户需要展示给客户等等, 能够协调好这些问题, 可以说开发出动态网站已经入门了。
摘要：随着社会逐渐进入信息化, 网络应用已成为生活中必不可少的一部分。很多人都在开发网站或想开发网站, 这里就简要的谈论下怎样快速上手开发网站。
关键词：开发,动态网站,跳转,通信
推荐阅读：
加强动态监测高效开发潜山油藏10-08
注水开发油藏动态分析研究09-11
ASP技术动态网站设计论文05-01
浅谈贸易经济学科发展动态09-13
ASP技术动态网站设计论文提纲11-15
开源CMS动态网站设计论文提纲11-15
浅谈电视摄像实践之动态构图技巧09-13
基于WAMP的红色文化动态网站的设计09-13
特高含水油田开发规划动态预测方法论述02-28
