JavaScript优化细节分享
下面,W3C Group为大家呈现WEB前端开发高性能优化部分之JavaScript的优化细节!
一、避免出现脚本失控
不论什么脚本,在任何时间、任何浏览器上执行,都不应该超过100毫秒。如果实际执行的时间长于这个底限,一定要将进程分解成若干更小的代码段。
脚本失控基本上有以下四个方面的原因:
1. 在循环中执行了太多的操作
解决这个问题的诀窍就是用下面这两个问题来评估每个循环:
- 这个循环必须要同步执行么?
- 循环里面的数据,必须要按顺序执行么?
如果1和2都可以否定,那么建议使用setTimeout方式将循环体切分成小块进行异步处理
将循环中的定义变量及初始化操作放到循环外。参见:http://www.w3cgroup.com/article.asp?id=111
2. 臃肿的函数体
在JavaScript中,我们应该尽可能的用局部变量来代替全局变量!
理解JavaScript作用域链。参见:http://www.jslab.org.cn/?tag=ScopeChainAndClosure
理解原型链。参见:http://www.jslab.org.cn/?tag=prototypeChain
3. 过多的递归
使用迭代方式替代递归,采用memoization技术优化递归
斐波那契数列的递归算法优化,参见:http://www.jslab.org.cn/?tag=Memoization
4. 过多的DOM调用
在Web开发中,JavaScript的一个很重要的作用就是对DOM进行操作。可你知道么?对DOM的操作是非常昂贵的,因为这会导致浏览器执行回流(reflow)操作。而执行了过多的回流操作,你就会发现自己的网站变得越来越慢了。我们应该尽可能的减少DOM操作。
回流操作主要会发生在几种情况下:
- 改变窗体大小
- 更改字体
- 添加移除stylesheet块
- 内容改变哪怕是输入框输入文字
- CSS虚类被触发如 :hover
- 更改元素的className
- 当对DOM节点执行新增或者删除操作或内容更改时。
- 动态设置一个style样式时(比如element.style.width="10px")。
- 当获取一个必须经过计算的尺寸值时,比如访问offsetWidth、clientHeight或者其他需要经过计算的CSS值(在兼容DOM的浏览器中,可以通过getComputedStyle函数获取;在IE中,可以通过currentStyle属性获取)。
解决问题的关键,就是限制通过DOM操作所引发回流的次数:
1.在对当前DOM进行操作之前,尽可能多的做一些准备工作,保证N次创建,1次写入。
2.在对DOM操作之前,把要操作的元素,先从当前DOM结构中删除:
- 通过removeChild()或者replaceChild()实现真正意义上的删除。
- 设置该元素的display样式为“none”。
修改操作完成后,将上面这个过程反转过来,建议使用第2种方式。
3.CSS部分
另外一个经常引起回流操作的情况是通过style属性对元素的外观进行修改,如element.style.backgroundColor = "blue";
每次修改元素的style属性,都肯定会触发回流操作,要解决这个问题可以:
- 使用更改className的方式替换style.xxx=xxx的方式。
- 使用style.cssText = ¹¹;一次写入样式。
- 避免设置过多的行内样式
- 添加的结构外元素尽量设置它们的位置为fixed或absolute
- 避免使用表格来布局
- 避免在CSS中使用JavaScript expressions(IE only)
4.将获取的DOM数据缓存起来。这种方法,对获取那些会触发回流操作的属性(比如offsetWidth等)尤为重要。
5.当对HTMLCollection对象进行操作时,应该将访问的次数尽可能的降至最低,最简单的,你可以将length属性缓存在一个本地变量中,这样就能大幅度的提高循环的效率。
二、避免大字符串字面量对象操作,如 字符串.lenth,尽量转换为new String(字符串)后再进行操作
三、在做字符查找替换等操作时善用正则表达式
快速掌握ECMAScript正则表达式。参见:http://www.w3cgroup.com/article.asp?id=202
四、减少语句,利用运算符优先级实现if else表达式,使用三元表达式,使用连续表达式(看情况,将损失程序可读性)
利用运算符优先级实现if else表达式参见:http://www.w3cgroup.com/article.asp?id=131
五、将CSS,JS文件合并到一个文件(非BT爱好者还是不要玩了^_^)
参见:http://www.w3cgroup.com/article.asp?id=29
六、避免Javascript事件绑定出现内存泄漏
"These memory leaks often occur as a result of circular references between JavaScript objects and objects within IE’s DOM (document object model)." Microsoft GPDE Team Blog
参见:http://www.w3cgroup.com/article.asp?id=207
七、使用WEB Workers技术(支持html5的浏览器)
Web Workers为JavaScript提供了一种能在后台进程中运行的方法,Web Workers进程能够在不影响用户界面的情况下处理任务。
参见:http://www.w3cgroup.com/article.asp?id=242
八、Y!14条(14 Rules for Faster-Loading Web Sites)
- Rule 1 - Make Fewer HTTP Requests
- Rule 2 - Use a Content Delivery Network (Server端)
- Rule 3 - Add an Expires Header (Server端)
- Rule 4 - Gzip Components (Server端)
- Rule 5 - Put Stylesheets at the Top
- Rule 6 - Put Scripts at the Bottom
- Rule 7 - Avoid CSS Expressions
- Rule 8 - Make JavaScript and CSS External
- Rule 9 - Reduce DNS Lookups (Server端)
- Rule 10 - Minify JavaScript
- Rule 11 - Avoid Redirects (Server端)
- Rule 12 - Remove Duplicate Scripts
- Rule 13 - Configure ETags (Server端)
- Rule 14 - Make AJAX Cacheable
- Rule 15 - Use Iframes Wisely
参见:http://www.w3cgroup.com/article.asp?id=97
九、微软早期的DHTML优化建议
- 使用数组push替代字符串累加
原创文章,转载请注明出处http://www.w3cgroup.com/article.asp?id=255
:hover在IE6的兼容问题
在处理css的机制上,IE总是有很多让人吐血的举动,但对于他们现在的改进力度还是值得高兴的。
就拿对伪类:hover的支持来说,IE7+终于添加了对a以外其它标签的支持。对于这样的改进,当然是要拍手称快的,但在IE6下,:hover就连对a的支持都不是那么的尽如人意。下面就是我想简单说的一个关于:hover在IE6及更早浏览器下的问题。
很多人可能都已经知道了:hover在IE6及更早浏览器(以下称IE6-)下的一些问题。我主要是想说一下形如a:hover span{}这样的问题。
有的时候为了增加一些简单的动态效果,常常会借助:hover的帮忙,比如我们时常会令鼠标经过链接时改变文字的颜色。如:
是的,这将在所有的浏览器中都有效。但如果换成这样:
你会发现在IE6-下什么都没有发生,我们的样式失效了。对,就是这样,应该很多人都碰到过且已经解决了这个问题。
是的,只需要再添加一个a:hover{}样式就可以解决这个问题了,里面可以是zoom, padding, margin等属性。如下:
看着恢复了正常的效果,去想可能是因为什么造成:hover失效的。你可以使用zoom, display, padding等等属性来搞定,于是想会不会是因为haslayout。恩,很有可能就是这样。但你接着测试,会发现,不论你在a:hover{}写入任何属性,color啊,font-size啊,overflow啊(甚至是不存在的属性,如xx:yyy),都可以使之恢复正常。
测试到这里是不是有点目瞪口呆的感觉?对,我也是这样的。至于原因是什么,我还不知道,或许有人知道。
一个a:hover的简单例子:
运行代码框
[Ctrl+A 全部选择]
例子虽然简单,但即刻你又会发现其实中英菜单和一些css tips效果也是那么的简单。
原文:http://blog.doyoe.com/article/216.htm
a:hover{zoom:1;}
a:hover em{color:#F00;}
<a href="?">鼠标经过时改变我的<em>颜色</em></a>
a:hover em{color:#F00;}
<a href="?">鼠标经过时改变我的<em>颜色</em></a>
a:hover{color:#F00;}
<a href="?">鼠标经过时改变我的颜色</a>
网站用户体验的衡量指标
@liuyaping在阿里做的关于用户中心的衡量指标的分享和交流,很受启发。Google应用的这套用户中心的指标体系通过提供一个可广泛适应性的维度框架,以及具体指标的创造流程,给我们量化用户体验提供了非常好的参考。
下面是根据Google的《Measuring the User Experience on a Large Scale: User-Centered Metrics for Web Applications》一文的主要内容和观点草草翻译如果有翻译的词不达意的情况,请参考原文,见谅哈 :)
+++++++不算华丽的分割线+++++++++
越来越多的产品和服务被部署在网络上,这对大规模的用户体验衡量提出了新的挑战。非常需要有一个用户中心的指标体系,用以衡量关键目标的达成过程,并推动产品的决策。在这份简报中我们可以看到Google目前使用的以用户为中心度量的HEART框架,以及作为产品目标映射到的这个指标创建的过程。
1、传统的网站衡量指标PULSE
Page view/页面访问次数
Uptime/持续运行时间
Latency/延迟
Seven days active user/7天活跃用户数
Earning/收入
PULSE是基于商业和技术的产品评估系统,被很多组织和公司广泛应用于跟着产品的健康状况。
这些指标非常重要,并且和用户体验息息相关,比如一个产品如果经常访问中断(low uptime)或者非常慢(hight latency)是无法吸引用户的。一个电子商务网站的购买流程如果太多步很可能难以赚到钱。一个拥有很棒用户体验的产品更可能在PV和用户量上不断增长。
但是这些指标要么太浅层次,要么和用户体验不直接相关,很难用以评估用户界面的改变对于用户的影响。并且他们也经常很尴尬的互相影响——比如一个特定功能页面的PV上升可能是由于这个功能真的很流行,或者是由于界面让用户迷惑,而不断在周边点击以便逃走。带来短时期的价值的改进,有可能造成糟糕的用户体验,从而在更长时期造成用户的流失。
2、以用户为中心的指标HEART
Google的用户体验师基于PULSE中存在的问题,提出了一个作为补充的度量框架:HEART。
Happiness/愉悦度
Engagement/参与度
Adoption/接受度
Retention/留存率
Task success/任务完成度
这五个仅仅是衡量的范畴,不同的产品可由此定义特定的指标,用以监控达到目标的进程。愉悦感结合用户的满意度来度量,任务完成度结合任务完成的效果和效率来度量。参与度、接受度、留存率是全新的范畴,一般通过广泛的行为数据来制定。通常并不适合在一个指标设定中用到所有维度,但可以参考该框架来决定是包括或排除某个维度。比如用户是要将使用你的产品作为工作的一部分,在这种企业环境下参与度就没有什么意义了。在这个案例中可以考虑选择愉悦感或者任务完成度。
愉悦感
愉悦感是设计用户体验中的主观感受问题,像满意度、视觉感受、向别人推荐的意愿、易用性感知。可以通过好好设计问卷长时间监控相同的指标来看设计修改后带来的变化。
参与度
参与度是用户在一个产品中的参与深度,在这个维度上,通常用来作为一段时期内访问的频度、强度或互动的深度的综合。比如单用户每周的访问次数,或者用户每天上传的照片数,这比总量要好——因为总量的增长可能是由更多的用户的产生,而不是更多的使用产生的。
接受度和留存率
接受度和留存率指标通过特定时期内大量用户的统计(比如,7天的活跃用户数)提供强大的洞察,来定位新用户和老用户的差异问题。接受度监控特定时期内有多少新用户开始使用产品(比如,最近7天内新创建的账号),而留存率则监控特定时期内有多少用户在下稍后一个时期内仍然存在(比如,某一周的7天活跃用户在3个月后仍然在7天活跃用户中)。
任务完成率
任务完成率维度包括一些传统的用户体验行为指标,比如效率(如完成任务的时间),效果(比如任务完成的百分比)以及错误率。
3、目标——信号——指标
不管定义的用户中心的指标是怎样的,如果不能精确的和目标相关,以及能够跟踪达到目标的过程,那么都是白搭。Google提供了一个简单的流程来完成指标的设定,通过阐明产品或者功能的目标,然后定义达成的信号,最终建立特定的指标的监控方式。
目标
第一步是定义产品或功能的目标是什么,特别是在用户体验方面。用户需要完成什么任务?重新设计是试图达到什么?使用HEART框架来提示相关的目标(比如,是吸引新用户更重要,还是鼓励现有用户更积极参与重要?)一些有用的提示:
不同的团队成员可能对于项目的目标有不同的意见。这个过程提供了一个很好的机会来收集不同的想法并且努力达成共识(并且buy-in选择的指标)
特定项目或功能的成功可能与产品的整体目标不同
在这个阶段无需太担心是否和如何找到相关的信号或指标
信号
接下来,想想用户的行为或态度如何体现成功或失败。什么行动会表示目标已经达到?什么感受或看法能够联系到成功或失败?在这个阶段你应该思考你的这些信号的数据源可能是什么?比如,基于日志的行为信号,这些相关的行为目前有记录或者能够被记录吗?可以收集态度的信号——能否定期投放问卷吗?日志和问卷时我们最常使用的两个信号源,但还有其它的可能性(比如,使用一个面板或判断让用户评分)。一些有用的提示:
选择敏感和和目标特别相关的信号——他们应该不因不想过的原因变化,除非用户体验变好或变糟糕了
有时失败比成功更容易定义(比如,放弃任务、撤销,戳着)
指标
最终,想想这些信号是否可以转换为特定的指标,是否可以被方便的持续跟踪。一些有用的提示:
原始统计数据会随同你的用户基数增长而增长,需要转化为常态;比例、百分率或者每个用户的平均值更有用一些
在确保精度上有很多挑战,基于web日志的指标,如从自动生成的数据中过滤流量(如爬虫、垃圾信息),并且确保所有重要的用户行为都被日志记录(默认情况下可能不会,尤其是在基于AJAX或基于Flash的应用中)
如果需要拿你的项目或产品和其他的进行对比,你可能需要在这些产品的标准指标中增加监控指标。
4、总结
Google已经花费数年时间来解决广泛应用的用户体验的衡量指标体系。HEART框架和目标-信号-指标的过程,已经在Google超过20个产品和项目中进行了应用。不管是数据驱动的还是用户中心的产品中,HAERT框架和目标-信号-指标过程都能帮助产品团队来做出决定。
原文:http://www.tianya8.net/2011/03/user-centerd-merics.html#
淘宝网店流量匹配规则
对于店主来说,流量的重要性不言而喻,而由于已经在淘宝上逛的人更有可能已经拥有网络结算手段,所以淘宝站内流量更被店主看重。那么,淘宝网店流量匹配规则是怎样的呢?
经常有店主问我淘宝站内流量匹配规则是怎样的,怎么能提升一些人气好多一些生意机会。
经过多方调查及深度数据分析,总结一下我了解到的淘宝网店流量匹配规则:
1.各类活动,淘宝对各类活动投入的资源及支持的力度都相当大,结合信用等级提升带来的流量增加,参加淘宝官方组织的各类活动是流量提升的最快办法,当然,也要有心理准备,活动商品几乎是无法赚钱的,而且要投入很多精力维护商品信息以免浪费活动资源,应该把这看成网店建设成本的一部分吧。
2.旺铺和消保等,旺铺流量优先体现在缩略图方式显示商品目录上,这种显示方式是只提取旺铺数据的,各类消保则是用户的选择使流量增加,有消保的商品往往更容易吸引用户的点击。
3.按信用等级匹配,这实际上是淘宝对高信用等级的一种鼓励,毕竟活动之类既聚人气又有可能变成收费项目的服务需要有后续的支撑,而且买家优先搜到信用等级高的店铺商品,也会增加对淘宝的信心。
4.按结束时间匹配,离结束时间近的优先,由于自动上架只有一次,再重新上架就需要人工维护了,如果既想把结束时间弄得短一些又要维持商品一直在架上,就需要经常维护自己的商品,这是淘宝对活跃卖家的一种鼓励。
5.按旺旺在线时间匹配,原因,要鼓励店主多使用旺旺和买家沟通,而少借助于其他沟通工具,理由嘛,自然是为了推广自家的产品了,而且旺旺的一些安全提醒措施,也比用其他沟通工具要强,毕竟专门为网络交易用的。
知道这些规则,就该知道,在淘宝上做生意,要提升人气,有以下几个途径:
1.如果你每单平均值比较高(比如达到二百块一单),可以买直通车广告,据我统计,平均三百个浏览量(含机器即搜索引擎浏览)可以带来一个成交,如果你每单平均值比较低,就不要买了,会赔本的(这也是一些关于直通车广告攻略里反复强调的,要看自己的商品价值和毛利水平)。
2.参加活动,关注淘宝官方发布的活动信息,参加几次活动,把信用等级提升上去好获得后面按信用等级匹配的流量。
3.缩短网店维护周期,保持旺旺经常在线。
衡量网页设计有效性的方法
本文从网页分析的角度来考查网页设计。我们将围绕网页设计师应该如何使用指标和工具来衡量网页设计的影响力和有效性的问题展开讨论。
访客的参与阶段
任何时候,网站访客都处于以下几个阶段之一:
1. 关注(Attention)
2. 感兴趣(Interest)
3. 渴望(Desire)
4. 交互(Action)
5. 满足(Satisfaction)
在每一个阶段,访客都有不同的期望,设计就是要确保这些期望得到满足。
吸引游客注意的设计问题: 这个设计是否仅在几秒钟就能吸引访客注意?这个设计是否帮助访客很快地找到他们想到的信息?
虽然网站的目标网页和内页需要应用不同的方法,但是有一点是可以肯定的:如果你不尽快地吸引用户的注意力,她很快就会转到其它网站去。
衡量指标:跳出率和退出率
方案:现在大部分网页分析工具都能告诉你有多少次吸引你的用户的注意失败。
退出率告诉你有多少人在某个特定的页面离开网站,而跳出率是指用户没有看网站第二个页面就离开网站的比率。
你可以进一步测量跳出率中用户停留不到10秒的比率。越多用户跳出你的网站,说明你的设计和内容在帮助用户找到想要的信息上越没有用处。
提高用户感兴趣度的设计
问题:用户是否觉得自己找对了地方?你是否能说服用户你网站上的信息就是(或可能就是)他们所需要的?
如果你设法使用用户对你的网站感兴趣,他将会花更多的时间来阅读或参与进来。在这种情况下,设计应该使得网站很容易浏览,阅读和参与网页的交互。
阅读一篇文章所需的时间与大部分访客花在阅读这篇文章上的时间的比较是怎么样的?比如,根据一些材料,大学生的平均阅读速度是每分钟250到350个词。如果你的文章有1000个词,那么阅读整篇文章所需要的时间就是2.8到4分钟。如果用户在这篇文章页上停留的平均时间只有5秒钟,这就说明大部分内容都没有被阅读,内容不够有吸引力来保持用户的兴趣。这个问题可以归结于网页复制问题,设计问题或者二者皆有。
另外一个例子:有多少用户点击了视频的“播放”按钮,或者查看某个产品的其它图片?内容产生兴趣,而设计使得内容更容易享用。
网页分析把这些交互和事件称作微转换。发生得越多微转换,越多用户将会最终参与购买,注册或填写信息(宏转换)。
衡量标准:针对一个设计的交互数,花费在网页上的时间。
方案:测量网页设计保持访客兴趣能力的好坏的一种方法是使用Google Analytics的高级特性,跟踪每个可以被认为用户对网页变得感兴趣的行为(比如点击,滚动,评论,播放视频或其它任何你能想到的)事件。你可也以尝试一下ClickTale,这个工具可以记录网站访问的整个会话,并且可以回放它们。它可以提供有关访客与网页交互的众多深度信息。
增加渴望和获取行为的设计
问题:设计是否明确的激发了你的访客的想象,并使他们觉得能从你提供的东西里获得价值?访客是否点击了行动按钮?
网络上每个产品或服务都是唯一的,网页设计的工作就是要找出什么能使得它与众不同,并且为什么用户应该选择这个而不是其它的。
如果设计工作做得好,就很容易使用户点击行动按钮。当用户决定要注册或购买产品的时候,能够让用户迅速找到行动按钮是非常重要的。
衡量标准:行动按钮点击数
方案:Crazy Egg等提供的点击跟踪解决方案可以告诉你用户如何能过你的行动按钮来交互。
在增别访客渴望方面,多元测试和A/B分隔测试可以帮助你测试不同的设计并找出最有效的一种。
让访客满足的设计
问题:当它们被点击后,下一页是否能提供给访客他们想要的东西以满足他们?
点击之后应该出现什么的设计对于站长们寻求的转化来说是非常重要的。你已经获得了用户的关注,兴趣和渴望,因此现在设计就应该只有两个主要的任务。
第一个任务是使得转化过程尽可能的简单(即优化结账流程和优化网页表单提交过程)。
另一个任务是确保用户对流程可能存在的问题在当前的位置能够得到回答,而不需要去中断流程去站内寻找答案。
由于设计缺陷而在这个阶段损失客户确实是太遗憾了。
衡量标准:使用的渠道和/或路径
方案:如果你有预算的话,我推荐用Kissmetrics,MixPanel或者Performable来跟踪转化的渠道和路径。
如果没有的话,你可以考虑Google Analytics的目标和渠道跟踪,或者使用PadiTrack,一款免费的建立渠道的Google Analytics分析应用。
结论
最后,最要的是网站的每个元素对达到目标的效果。数据驱动,通知设计,它们的所有形式在网站性能方面都有重要作用和巨大的责任。
ASP实现分页代码
此效果最后的显示是:第N页[共*页] <<1 2 3 4 5 6 7 8 9 10 >>。
用DW+ASP做网页时,在绑定记录集后,代码页里马上出现以下代码:
以下是引用片段:
<%
Dim Recordset1
Dim Recordset1_numRows
Set Recordset1 = Server.CreateObject("ADODB.Recordset")
Recordset1.ActiveConnection = MM_数据库名_STRING
Recordset1.Source = "SELECT * FROM 表名"
Recordset1.CursorType = 0
Recordset1.CursorLocation = 2
Recordset1.LockType = 1
Recordset1.Open()
Recordset1_numRows = 0
%>
现在我们要来对代码做点修改,请在上面代码中修改为如下的代码:
以下是引用片段:
<%
Dim I
Dim RPP
Dim PageNo
I=1
RPP=50
PageNo=CInt(Request("PageNo"))
’上面即是新插入的,
Dim Recordset1
Dim Recordset1_numRows
Set Recordset1 = Server.CreateObject("ADODB.Recordset")
Recordset1.ActiveConnection = MM_数据库名_STRING
Recordset1.Source = "SELECT * FROM 数据库名"
Recordset1.CursorType = 1 ’将上面代码的0改为1.
Recordset1.CursorLocation = 2
Recordset1.LockType = 1
Recordset1.Open()
Recordset1_numRows = 0 ’再在此行的下一行开始加入如下代码:
Recordset1.PageSize=RPP
If PageNo<=0 Then PageNo=1
If PageNo>Recordset1.PageCount Then PageNo=Recordset1.PageCount
Recordset1.AbsolutePage=PageNo
Sub ShowPageInfo(tPageCount,cPageNo)
Response.Write "第"&cPageNo&"页[共"&tPageCount&"页]"
End Sub
Sub ShowPageNavi(tPageCount,cPageNo)
If cPageNo<1 Then cPageNo=1
If tPageCount<1 Then tPageCount=1
If cPageNo>tPageCount Then cPageNo=tPageCount
Dim NaviLength
NaviLength=10 ’NaviLength:显示的数字链接个数
Dim I,StartPage,EndPage
StartPage=(cPageNoNaviLength)*NaviLength+1
If (cPageNo Mod NaviLength)=0 Then StartPage=StartPage-NaviLength
EndPage=StartPage+NaviLength-1
If EndPage>tPageCount Then EndPage=tPageCount
If StartPage>1 Then
Response.Write "<a class=""pageNavi"" href=""?PageNo=" & (cPageNo-NaviLength) & """><<</a> "
Else
Response.Write "<font color=""#CCCCCC""><<</font> "
End If
For I=StartPage To EndPage
If I=cPageNo Then
Response.Write "<b>"&I&"</b>"
Else
Response.Write "<a class=""pageNavi"" href=""?PageNo=" & I & """>" & I & "</a>"
End If
If I<>tPageCount Then Response.Write " "
Next
If EndPage<tPageCount Then
Response.Write " <a class=""pageNavi"" href=""?PageNo=" & (cPageNo+NaviLength) & """>>></a>"
Else
Response.Write " <font color=""#CCCCCC"">>></font> "
End If
End Sub
%>
上面代码中:RPP:指定每页显示的记录条数。即每页显示几条数据。
NaviLength:显示的数字链接个数,即10就为1 2 3 ...10的连接个数。
若要显示所有连接的页(个)数,你可以设置为:NaviLength=tPageCount。
这时代码已经差不多了,但还要在显示的地方(如表格)中加点代码才行吧,(要不然怎么显示,呵~~~)如我们插入一个2行3列的表格。
1.将光标移在第一行第一列中,切换到代码中加入:<%=(PageNo-1)*RPP+I%>
这个代码是显示序号用的。
2.右边2个单元格(当然你自己可以根据需要分更多的列)就是为你要显示的记录了。请分别从绑定的记录集中选中你要显示的字段拖放在相应的单元格中,(也可以选中后再点右下角的“插入”按钮)。这里我们就先拖2个进来如“编号”和“公司名称”。分别到1行第2个单元格和1行第3个单元格中。
3.这个是个关键的,请将光标移到第一行任意单元格中,再来点选窗口底下的<tr>,这时你看看代码,<tr>....</tr>就被选中了。这时请在<tr>....</tr>的前面插入如下代码:
以下是引用片段:
<%
If Recordset1.EOF OR Recordset1.BOF Then
Else
For I=1 To RPP
%>再在<tr>....</tr>之后插入如下代码:
<%
Recordset1.MoveNext
If Recordset1.EOF OR Recordset1.BOF Then Exit For
Next
End If
%>
4.这是就完成表格的第一行的工作。下来也是关键,即分页的连接。光标在第2行第一个单元格中时在代码窗口插入:
<% showPageInfo Recordset1.PageCount,PageNo %> 的代码。右边的2个单元格将其合并,在代码中插入:
<% showPageNavi Recordset1.PageCount,PageNo %>
的代码。
5.大功告成!这时感快预览一下吧。。。。
表格的全部代码如下:
以下是引用片段:
<table width="710" border="0" align="center" cellpadding="3" cellspacing="1" bgcolor="#333333">
<%
If Recordset1.EOF OR Recordset1.BOF Then
Else
For I=1 To RPP
%>
<tr bgcolor="#FFFFFF">
<td width="30" align="center"><%=(PageNo-1)*RPP+I%></td>
<td><%=(Recordset1.Fields.Item("编号").Value)%></td>
<td><%=(Recordset1.Fields.Item("公司名称").Value)%></td>
</tr>
<%
Recordset1.MoveNext
If Recordset1.EOF OR Recordset1.BOF Then Exit For
Next
End If
%>
<tr bgcolor="#FFFFFF">
<td colspan="3"><table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr bgcolor="#006699" class="w12">
<td width="121" align="center"><% showPageInfo Recordset1.PageCount,PageNo %>
</td>
<td width="573" align="center">
<% showPageNavi Recordset1.PageCount,PageNo %>
</td>
</tr>
</table></td>
</tr>
</table>
这时你去点应用程序中的“服务器行为”中的记录集,在代码中就显示为一下代码,也是我的原代码:
以下是引用片段:
<%
Dim I
Dim RPP’RPP:指定每页显示的记录条数,
Dim PageNo
I=1
RPP=50
PageNo=CInt(Request("PageNo"))
Dim Recordset1
Dim Recordset1_numRows
Set Recordset1 = Server.CreateObject("ADODB.Recordset")
Recordset1.ActiveConnection = MM_数据库名_STRING
Recordset1.Source = "SELECT * FROM 表名 ORDER BY 编号 ASC"
Recordset1.CursorType = 1
Recordset1.CursorLocation = 2
Recordset1.LockType = 1
Recordset1.Open()
Recordset1_numRows = 0
Recordset1.PageSize=RPP
If PageNo<=0 Then PageNo=1
If PageNo>Recordset1.PageCount Then PageNo=Recordset1.PageCount
Recordset1.AbsolutePage=PageNo
Sub ShowPageInfo(tPageCount,cPageNo)
Response.Write "第"&cPageNo&"页[共"&tPageCount&"页]"
End Sub
Sub ShowPageNavi(tPageCount,cPageNo)
If cPageNo<1 Then cPageNo=1
If tPageCount<1 Then tPageCount=1
If cPageNo>tPageCount Then cPageNo=tPageCount
Dim NaviLength
NaviLength=20 ’NaviLength:显示的数字链接个数
Dim I,StartPage,EndPage
StartPage=(cPageNoNaviLength)*NaviLength+1
If (cPageNo Mod NaviLength)=0 Then StartPage=StartPage-NaviLength
EndPage=StartPage+NaviLength-1
If EndPage>tPageCount Then EndPage=tPageCount
If StartPage>1 Then
Response.Write "<a class=""pageNavi"" href=""?PageNo=" & (cPageNo-NaviLength) & """><<</a> "
Else
Response.Write "<font color=""#CCCCCC""><<</font> "
End If
For I=StartPage To EndPage
If I=cPageNo Then
Response.Write "<b>"&I&"</b>"
Else
Response.Write "<a class=""pageNavi"" href=""?PageNo=" & I & """>" & I & "</a>"
End If
If I<>tPageCount Then Response.Write " "
Next
If EndPage<tPageCount Then
Response.Write " <a class=""pageNavi"" href=""?PageNo=" & (cPageNo+NaviLength) & """>>></a>"
Else
Response.Write " <font color=""#CCCCCC"">>></font> "
End If
End Sub
%>
不过有一个缺点就是:如当你想找99页时点>>9次,要是有一个输入框,输入99后回车就到99就完美了。
Table表格边框的隐藏
|
这是一普通的表格 | ||||
|
只显示上边框 | ||||
|
只显示下边框 | ||||
|
只显示左、右边框 | ||||
|
只显示上、下边框 | ||||
|
只显示左边框 | ||||
|
只显示右边框 | ||||
|
不显示任何边框 | ||||
表格边框的显示与隐藏,是可以用frame参数来控制的。请注意它只控制表格的边框图,而不影晌单元格。 只显示上边框 <table frame=above> 只显示下边框 <table frame=below> 只显示左、右边框 <table frame=vsides> 只显示上、下边框 <table frame=hsides> 只显示左边框 <table frame=lhs> 只显示右边框 <table frame=rhs> 不显示任何边框 <table frame=void> |
|||||
表格Table各种边框的实现
|
|||||||||
(利用cellspacing1像素间隙和表格与单元格背景的不同) |
|||||||||
(对单元格border的定义) |
|||||||||
|
|||||||||
|
|||||||||
(简单的亮暗边框设置,注意只有IE支持这种效果) |
|||||||||
|
(应用<fieldset>和</legend>标签) |
|||||||||
|
(用CSS为<legnd>定义一个边框) |
|||||||||
|
(在<legnd>中插入一个表格) |
|||||||||
这一节要靠你自己去发现了,因为这样学到的东西才是真正属于自己的(我的一个偷懒的借口)。 我已经在每个表格的下面写出了重点,并在右边给出它的源代码,你可以对照着看。下面还有一 个边框会自己变颜色闪动的表格,有兴趣也研究研究吧 ^o^ |
|||||||||
45个Dreamweaver CS3常见问题整理
1> 在DW中,如何输入一个空格呢?
输入空格的问题,在DW似乎已成了一个老生常谈的问题,我们可能在许多介绍DW使用方面的书籍或文章中看到过N次。
DW中对空格输入的限制是针对“半角”文字状态而言的,因此通过将输入法调整到全角模式就可以避免了,方法是:打开中文输入法(以人工智能ABC为例),按Shift+Space切换到全角状态,现在应该没问题了。
此外,你还可以通过许多“变通”的方法达到录入空格的目的,比如常用的是:
直接在源代码中加入代表空格的HTML代码“ ”;输入一定长度的文字对象后,然后调整文字的颜色与当前的背景颜色相同等等,不过注意的是后者在一些浏览器中可能显示上有点问题。
2> 如何在浏览器地址栏前添加自定义的小图标?
你是不是记得有时在浏览网易网站的首页时,在地址WWW.163.COM前会显示一个“易”字样的小图标。而默认情况下,这个图标是一个IE浏览器的指定图片。
其实这也不是什么高深技术,只不过在网站目录下添加了一个特定文件而已。
这时,我们需要预先制作一个图标文件,大小为16*16像素。文件扩展名为ico,然后上传到相应目录中。在HTML源文件“<head></head>”之间添加如下代码:
<Link Rel="SHORTCUT ICON" href="http://图片的地址(注意与刚才的目录对应)">
其中的“SHORTCUT ICON”即为该图标的名称。当然如果用户使用IE5或以上版本浏览时,就更简单了,只需将图片上传到网站根目录下,即可自动识别!
3> 为什么,我本来设计很好的网页,在浏览器窗口最小化时会变的丑陋难堪?
这应该是个很值得大家注意的问题,也就是说,在全屏状态下浏览网页内容时,一点问题也没有。当我们使用窗口的最小化命令或手动的调整窗口的大小时,问题就慢慢出现了。网页内容会把当前窗口作为显示范围,依次下挫。举个例子,和在记事本中有“自动换行”和“没换行”的差别是完全一样的。
解决这个问题,我们必须从网页的布局说起,一般情况下,网页内容的定位大多是通过表格来实现的。因此问题的“毛病”也就出在表格上。
请看下面一个表格的属性面板显示:
你可能已经注意到了,在表格的高宽设定选择上提供了两种不同的类型,百分比和像素。其中百分比的使用将会产生前面说到的那个毛病,将其全部更正为Pixels单位的实际大小就可以了。
4> 如何改变网页显示时,最顶部的提示信息?
浏览网页时,顶部的提示信息往往代表了网页内容的关键所在,有助于访问者提前了解网页内容。在DW4前,没有在功能上直接提供该操作,我们往往通过在源代码中应用“title”属性来完成。进入DW4就简单多了。
直接在编辑窗口最上方的“title”输入框内键入所需要的文字信息即可。
5> 怎么样,才能为图片添加指定颜色的边框?
对于没有边框的图片而言,直接插入到网页中,在显示效果上是相当差的。记得在微软的FP中要给图片添加满意的边框还是相当麻烦的。
不过在DW中就显得容易多了,因为这里有一个“Border”属性,可以让你直接设置边框的宽度。
宽度设好了,你一定会问,颜色呢?面板上并没有提供颜色的选择呀!呵呵,其实这里有一个技巧问题,用鼠标选择图片对象,注意不是点击选中,而是拖动选择。象设定文字颜色一样进行就可以了。
6> 如何添加图片及链接文字的提示信息?
在我们浏览网页时,当鼠标停留在图片对象或链接上时,在鼠标的右下有时会出现一个提示信息框。对目标进行一定的注释说明。在一些场合,它的作用是很重要的。
下面先看看图片提示信息的添加,选中图片对象,在属性面板里你会发现有个“Alt”输入框。默认情况下,该输入框是空白的。在这里录入需要的提示内容就可以了。
那么链接提示的制作就没这么简单了。因为DW中没有直接提供该功能,因此我们需要通过添加HTML代码来实现。
在<a href=“” >中添加“title”属性。title=提示内容即可。
7> 如何把自己的ZIP或其他类型的文件供别人下载?
在不少初级网页制作者看来,好象通过鼠标单击完成下载是件很"神秘"的事,实际上远非如此.在DW中凡是不被浏览器识别的格式文件(HTM,HTML,ASP,PHP.PERL,SHTML等以外的)作为链接目标时,默认的操作都是下载.
这时你只需要,把要浏览者下载的文件名写好,然后制作一个到目标文件的链接.注意目录一定不要搞错.
8> 怎样才能够保证网页中文字不跟随浏览器字体大小设置而变动?
大家都知道,在IE浏览器的功能设置中,有一个可以自由设置窗口内容字体大小的功能,这样由于不同访问者的习惯问题,呈现在他们面前的网页有时也会不同。
比如你可能本来设计时用的是2号字体,结果由于用户对浏览器的额外设定,变的更大了,这时显示效果上就出问题了。
那么解决的办法就是将网页内容定性的强制在某个合适的大小上。即不容许他变化。通过CSS样式表对字体进行强制性控制就可以实现这个要求了。
9> 以新窗口的形式打开目标链接?
以新窗口打开,顾名思义,也就是在不覆盖当前窗口的前提下,另外打开一个浏览器窗口。你可以直接在连接代码中<a href="" >加入“Target=_blank”。
如果你的HTML比较差的话,在DW属性面板上同样提供了这个设置,当你在Link输入框中键入WWW网址时,后面的Target下拉框同时也被激活了。
选择最上的“blank”就可以了。
10> 如何让网页载入时,象许多商业网站那样,弹出一个广告窗口
这在不少大型商业网站中,是时常见到的。在DW中可以轻松通过Behavior行为实现。
既然是载入时,我们可以把整个网页内容视为事件对象。在DW编辑窗口中鼠标点击左下角的“<body>”标签,这时你能注意到全部网页内容已经选中了。
单击“快速启动板”中的“Behavior”按钮,进入行为面板,
选择“Open Browse Window”项,这时你还可以对窗口样式进行自定义,比如大小,工具按钮的保留等等。另外还有一点就是别忘了对应的事件是“Onload”.
11> 我的快速启动板中没有"Timelines",怎么办?
DW从升级到4版本后,在快速启动板中增添了几个新的项目,比如Assets等等。这时原来在上面的Timelins(时间线)按钮被挤了下去。
当然如果你急于现在就使用它的话,仍然可以通过菜单“Windows”-“Timelines”找到。不过毕竟不如放在启动板中方便,这时我们能通过设置把它添加进来!
“Edit”-“Preference”进入窗口,在左边的项目列表中选择“panels”(面板),
单击上面的“+”号按钮,从下拉列表中选择“Timelines”。这时时间线已经自动添加到当前的“Show in Launcher”列表内容里,OK。更改后的“Launcher”面板
同时你还可以根据自己的需要自由的选择面板中出现的按钮选项,以提高工作效率。
12> 作一个网页让它可以每隔5分钟自动刷新一次,如何实现?
上网浏览时,我们经常会遇到一些网页。在隔一段时间没有响应时,它会自动刷新一次。除了可以起到提醒访问者的目的外,当新的刷新地址不是当前URL时,实现的就是自动跳转的功能。
无论是重复刷新,还是自动跳转。在网页设计中,都是相当实用的操作。下面我们来介绍下它们的制作方法。
选择DW“Object”面板的“Head”部分,注意默认情况下,显示的是Common的“内容”。
单击上面的“Refresh”按钮,
其中“Delay”输入框中键入刷新延迟的时间(单位:秒),“Action”为刷新指定的目标URL。因为现在是刷新当前页面,直接选单选项“Refresh This Document”即可。
13> 如何定义网页的关键字(Keyname)?
当用户使用搜索引擎search合适内容的网页时,关键字起着一个不容忽视的作用。大多的搜索服务器会每隔一段时间自动探测网络中是否有新网页产生,并把他们按关键字进行记录,以方便用户查询。
你当然想让你的网页出现在搜索引擎的查询返回列表中了,这时关键字的定义就尤为重要了。
同样在“Head”面板部分,
单击“Keywords”按钮,
录入需要逐个定义的关键字即可,注意每个关键字以“;”号隔开,数目没有限制。
14> 如何在编辑窗口中,隐藏一些不必要的标签?
当用户在网页中插入了太多的不可见元素时,在编辑窗口的最上面就会显示一排相应的标示标签,用来方便用户随时能找到它们。虽然这些标签本身并不影响浏览器里的显示效果,但多了以后,往往使网页内容不得不错位,从而一定程度上妨碍网页视觉上的调整,那么怎么样才能把这些东东去掉呢?
进入“Preperence”面板,列表中选择“Invisibel Elements”,
勾掉你不想显示的项目前的“对号”即可,比如Scripts等
15>安排不支持“框架”的浏览器的显示内容?
我们知道,目前的浏览器类型很多,因此我们设计网页时最先考虑到的往往是“这个东西是不是在不同的浏览器中都能显示好呢?”。框架就是一个例子!
不过避免开这点,很简单,你只需要在源代码中加入下面的内容就可以了。
< BODY><noframes> ---本网页中包含有框架结构,如果您不能正常显示的话,请下载新的浏览器版本或更换主流浏览器--- < /noframes></ BODY>
16> 如何避免别人把你的网页放在框架中?
一些居心不良的人,经常偷着窃取别人的劳动成果,比如把别人精心制作的网页以子页的形式放到自己的框架中。
那么怎样避免自己的网页内容被“盗用”呢?
你只需要在网页源代码的<head></head>之间加入以下代码内容:
<script language=“javascript”><!--
if (self!=top){top.location=self.location;}
-->< /script>
17> 怎样加入注释内容?
注释内容,顾名思义只是作为说明内容出现的,因此在浏览时不会出现在网页中。它的作用是对某些重要或复杂代码进行必要的标示,以更方便快捷的找到。
进入“Object”面板的“Invisibel”部分(即不可见元素),选择插入“Comment”按钮,
在“Comment”中键入必要的信息。这时如果你返回到源代码中,会看到这些操作添加的不过是下面格式的一段代码:
<!--这是需要填写的注释内容-->
18> 水平线,为什么不能设置颜色?
在DW中,当通过菜单“Insert”-“Horizonal Rule”插入水平线时,在属性面板中你会发现并没有提供关于水平线颜色的设置,因为最早NC中不支持标签<hr>(水平线的HTML代码)的COLOR属性,所以DW也没有关于它的设置。
看来需要的话,我们只能直接进入源文件更改了。
<hr color="对应颜色的代码">
19> 如何设置可以关闭当前窗口的功能?
这里我们可以先输入用来标示的文字“关闭窗口”,用鼠标拖动选中它,在“Link”输入框中键入“/”,同时切入源代码窗口,在链接代码中键入该事件-onclick=“javascript:window.close(); return false;”。
完整的代码为:< a href=“/”onclick=“javascript:window.close(); return false;”>关闭窗口< /a>
当然你也可以将文字“关闭窗口”换成其他的对象,比如图片,按钮等等!
20> 定时自动关闭的窗口又是怎样的呢?
上面提到了个关闭窗口的功能,那么现在的自动关闭又是怎么实现的呢?
在源代码<body>后加入下面的代码:
< script LANGUAGE=“javascript”> <!--
setTimeout(¹window.close();¹, 10000);
--> < /script>
其中的set Timeout是一个用来设定延迟时间的函数,这里10000表示10秒钟。
21> 如何更改浏览器中鼠标的"形状"?
一般情况下,鼠标在浏览器中以“箭头”的样式出现,那么我们能不能把它更改为自己喜欢的其他样式类型呢?
改变鼠标形状在DW中是通过“CSS样式表”来实现的。
菜单“文字(Text)”-“CSS样式表(CSS style)”-“Edit style sheet”,弹出样式表的编辑窗口,也可以单击快速启动板中的CSS style按钮找到,单击“New”按钮,选择默认的“Make custom style”,同时在下面的Define中使该样式只应用到当前网页文档,“This document only”。在“样式定义”窗口的左边列表项中选择“Extensing”(扩展项),相应右边设置在“Cursor”(鼠标)中,下拉选择合适的形状即可,确定后返回,按F12在浏览器中观察效果,不满意的话,还可以对样式进行修改。
22>如何去除掉链接文字下面的下划线?
在我们完成链接制作后,链接文字内容往往被自动在下面添加一条下划线,用来标示该内容包含超级链接。当一个网页中链接比较多时,就显得有些杂乱的感觉了,其实我们可以很方便的把它去掉。同样进入“Edit style sheet”窗口,单击“New”确立新样式,这里的Type(类型)中,需要选择的是“Redefine HTML Tag”,同时在具体的标记Tag中选中代表超级链接的“a”,单击OK。
编辑该样式,左边列表中选“Type”,勾取“Decoration”(修饰)中的“None”复选框,这时所有网页中的链接文字下划线都被清除掉了。
23> 怎样让鼠标在链接文字上方“悬停”时,产生变色,变形等效果?
访问网站时,我们遇到的最平常不过的一种效果就是“鼠标悬停响应”了,所谓的“鼠标悬停响应”表现在链接文字上,就包括改变颜色,修饰效果(下划线,中划线)等多种选择。
由于这种效果很好的起到了对目标内容的强调作用,因此无论是个人网站还是一些大的商业网站(如新浪,搜狐,网易等)都有应用。
在上个问题中,你已经知道了去除掉链接下划线的方法,这里不再赘述。下面的问题将是如何添加鼠标响应事件的过程。
同样进入“Edit style sheet”窗口,单击“New”确立新样式,不同的是现在的Type类型中选择最后的一项-“Use CSS selector”,“Selector”选单中选择“a:hover” OK,进入编辑样式窗口,设定“Type”项中的文字颜色为“红色”,当然你还可以添加鼠标悬停时出现下划线的效果。
24>如何让网页的背景图片不跟随内容滚动?
背景图片是很多网页设计者经常添加的东西,当网页内容超出一屏时,拉动滚动条背景图片会与内容相对静止的一起滚动,那么能否锁定背景不跟随滚动呢?当然可以进入“Edit style sheet”窗口,单击“New”确立新样式,在TYpe中选择“Redefine HTML Tag”,同时Tag选单选中“Body”,在左边列表中选择“Background”。 设定“Attachment”(附件)为“fixed”。其中scroll代表默认使用的滚动显示。
25> 背景音乐你一定知道吧,怎么添加呢?
在微软的网页工具-Frontpage中,有关于背景音乐的设置功能,那么DW显然没有作到这点,因此要使用的话,只能在源代码中手动添加了。
在使用前,提醒大家一点,使用背景音乐一定要注意网页文件的大小,不能顾此失彼。代码如下:
< EMBED src=“music.mid”autostart=“true”loop=“2”width=“80”height=“30”>
其中src指定音乐文件的位置,autostart为音乐文件上传后的动作,true表示自动开始播放,false不播放(默认值)。
27> 如何自动加入网页更改后的日期?
只需要在源文件<body></body>之间添加如下代码即可。
< Script Language=“javascript”><!--
document.write(“Last Updated:”+document.lastModified);
-->< /Script>
在浏览器中的显示样式为:“Last Updated:2001/8/19”
28> 怎样控制弹出POPUP信息?
有时,当我们点击链接时,会出现一些着重性说明的提示信息,也就是弹出信息。比如当某个链接还没有完成目标内容页的制作时,就可以应用POPUP信息解释一下。
在网页中合适位置输入链接文字,选中,在属性面板中制作链接。在仍保持选中状态的前提下,单击快速启动板中的“Behavior”按钮,
点击左上的“+”号,从列表中选中“Popun message”,在随后的窗口中输入需要提示的信息,
设定该动作的鼠标事件(Events)为点击(onclick)。在浏览器中预览效果如下
29> 隐藏浏览器中状态栏的URL地址信息的方法?
浏览网页,当鼠标停留在链接上方时,在下面的状态栏中会自动显示该链接目标地址,考虑到安全方面的问题,有时我们需要把它重置为“零”,即设为空白。
现在只需要在链接代码中作些手脚就可以实现了,
< a href=http://tech.163.com/school onMouseOver="window.status=¹none¹;return true">网易学院< /a>
30>如何改变状态栏里的提示文字?
默认情况下,当网页被载入时,在状态栏里将显示该网页的地址等信息。想不想让它变的更有魅力呢?
在DW“Behavior”行为板中,单击“+”号选择“Set Text Set”下的“Text Of Status Bar”选项,
在“Set Text of Status Bar”窗口中输入类似“欢迎你光临本网站--网管留言”等Message信息。
31> 如何建立电子邮件的表单处理方式?
表单应该是网页交互功能中必不可少的元素,表单的功能缘于信息的交互,因此表单的处理往往涉及到网络高级编程语言的使用,你或许说,哇!我不会编程呀!没关系,其实对于一些简单的表单内容处理靠电子邮件也可以实现。
先看下面的代码:
<form name="content" method="post" action="需要使用的处理程序" ></form>
上面是一个典型的表单的HTML源代码,其中METHOD决定采用方式,包括POST和GET两种。ACTION也就是咱们上面说的处理程序,一般可通过ASP/PHP/CGI实现。
那么用电子邮件怎么实现呢?action=mailto:XXX@163.com,这样当点击提交按钮后,就会弹出一个提示窗口,单击“确定”表单内容会发送到指定的邮箱中。
32> 怎样制作规范的电子邮件链接?
所谓的“电子邮件链接”即是当我们点击它时,浏览器会自动调用默认使用的邮件客户端程序发送电子邮件。
输入“有问题MAIL ME”字样,鼠标拖拉选中,切换到属性面板,在LINK输入框中键入如下命令:
Mailto:XXX@163.com?Subject=网友来信&bc=其他电子邮件地址&bcc=其他电子邮件地址。其中Mailto为邮件链接的协议,Subject 为邮件的标题,bc是同时抄送的邮件地址,bcc代表的也就是暗送了。
33> 如何制作“空链接”?
空链接也就是,没有链接对象的链接,在空链接中,目标URL是用“#”来表示的。也就是说制作链接时,只要在属性板的LINK输入框中录入#标记,它就是个空链接了。
空链接的出现涉及到多方面的因素,比如一些没有定期完成的页面,又为了保持页面显示上的一致(链接样式与普通文字样式的不同),就可以使用它了。
34> 点击空链接时,页面往往重置到页首端,如何处理?
在浏览器里,当我们点击空链接时,它会自动将当前页面重置到首端,从而影响用户正常的阅读内容,我们当然希望它能保持不动了。
这时,你能够用代码“javascript:void(null)”代替原来的“#”标记,回头看看,这个问题已经解决了。
35> 如何定制可自由在页面内跳转的链接?
如果你经常在网上订阅一些免费的电子杂志,一定对这种“标签链接”不陌生了,通过一个类似目录的列表,可方便的跳转到页面内的任何部分,无疑它的使用是专门为“超长内容”网页设计的。
先确定链接指向的位置,即屏幕跳转后停留的位置。进入“Object”面板的“Invisibles”部分,选中目标文本,单击“Insert Named Anchor”按钮,在“Anchor Name”中键入标签名称,OK,这时在文本下面会自动出现红色虚线以区别开普通的文本内容,注意它们在浏览器中不会出现。
然后就可以制作链接了,在属性板的LINK输入框录入“#nchor Name(刚才的名字)”。当然如果你想指向另外一页中的某个位置,也是可以的,把这个小尾巴放过去就行了。
36> 同时在一个图片上,作很多个链接,怎么办?
这个问题也就是我们平常说的“图片热点”(Image HOT)了,当然在DW里还有另外一个名字叫“图象热区域”。
选中图片,这时在属性面板左下的位置,有一个“Map”工具栏,其右边是三个用来圈定不同区域的按钮,以其中的矩形工具为例,选中后,鼠标停留在图片上会以一种“+”的形状显示出来,代表可以左右拖拉,完成后依次你可以完成多个热点区域的链接制作。注意各区域不可重叠。
37> 怎样制作可以响应鼠标事件的翻转图片?
在许多网页中,我们经常会看到一些栏目标题,当鼠标滑过时,能变成另外的样子。其实它们中很多是通过两张不同的图片来实现的,也就是所谓的“翻转图片”效果。
当然首先你要提前准备两张大小完全一样的图片,以确保翻转时不会有什么视觉上的不适,单击“Object”面板上的“Rollover Image” 弹出“翻转图片设置”窗口,分别单击“Browse”按钮确定“Original image”和“Rollover image”的地址,注意一定要选中下面的“Preload Rollover image”复选框,否则在鼠标滑过的瞬间,会产生一定的下载延迟而影响效果。
38> 如何制作“漫天飞舞”的图片?
在许多大型商业网站的首页中,你经常会看到不少来回飘来飘去的广告图片,点击后可以链接到指定的地址,在DW中这点是通过Timelines来实现的。
首先在网页中插入目标图片,同时选中它,单击快速启动板中的“Timelins”按钮进入“时间线”窗口,在时间轴1frame的位置鼠标右击,选择“Add Object”,这时时间轴上会出现一兰色色条(默认1-15frame),将镜头停在15frame处,同时移动页面内图片到运动的终点位置。
现在一个简单的运动动画已经完成了,你可以通过在中间添加keyframe的方法调整路径的曲折度。单击上方的右箭头按钮预览效果。
39> 怎样制作在页面中“静态悬浮”的图片?
所谓的“静态悬浮”也就是图片总是试图停留在网页中的某个位置,因此在视觉上有种跟着页面“走”的感觉,象悬浮着一样。
该效果的实现是通过javascript来完成的,一般要求有一定的编程能力。好在DW提供了制作该效果的固定插件,因此就显得简单多了。
首先你必须先下载stav插件,将里面的两个文件(其中包括图片文件Cross Browser Static Division.gif和网页文件Cross Browser Static Division.htm)都拷贝到DW安装目录ConfigurationObjectsCommon下。
重新启动DW,在Object(对象)面板中,你会看到最底部已经多了SI项,选中它在弹出的窗口中设定浮动层到上边和左边的距离,然后在图层中插入指定的内容(这里为图片)即可。
40> 如何使文字和图片内容共处?
我们都知道,在DW中,图片对象往往是独占一行的,那么文字内容只能在与其平行的一行的位置上,怎么样才可以让文字围绕着图片显示呢?
选中图片,在属性面板的右上方你能看到一个“Align”的属性选单,选择“Left”,这时你会发现文字已经均匀的排列在图片的右边了。
41> 实现多个窗口的连接?
面板设计一直是DW的一大特色,到了DW4版本,所用到的面板已经相当多了,那么我们如何才能更高效的利用它呢? “窗口连接”就是一种方便大家自定义的技术功能,简单的说,就是可以根据需要将两个或更多个面板放到一个窗口中来。 鼠标点击拖动一个面板的Tab栏到两一个面板上,当你看到一个黑色边框时,松开鼠标,这时两个面板已经合二为一了。
42> 如何制作一条宽度为1的细线?
在DW中,尽管水平线是以“Line”形式出现的,但在制作细线时,它表现的并不尽如人意,主要是过粗,没有需要的细腻感!
那么我们可以采取变通的方法以表格的应用来实现。
在网页中插入一个1行1列的表格,将表格的“cellpadding”“cellspacing”都设置为“0”,同时将单元格的“bgcolor”设定为红色,当然你也可以使用其他的颜色来代替,“Height”设定高度为1。
还有最关键的一步,查看源代码,将< td>< /td>中的“ ”去掉即可。
43>如何制作一个边框为1的方格?
很明显,我们现在还是要通过表格的设置来完成。
或许你会说,这还不简单嘛!建立一个1行1列的表格,然后将它的“Border”值设为1不就可以了。实际上,用这种方法制作的表格根本不是所说的边框为1的方格,而是要“粗”的多!
同样先插入一个1行1列的表格,将表格的“border”、“cellpadding”设置为“0”,“cellspacing”设置为“1”。设定表格的“bgcolor”为红色(即为边框的颜色),同时设定单元格的“bgcolor”为白色(即同背景色),OK了。
44> 怎样设置根据不同的浏览器,返回不同的页面?
浏览器不同,它所支持的技术和效果也不同。因而我们所设计的网页并不是在所有的浏览器中都能正常显示或最佳显示。这时一个判断浏览器的跳转就很必要了。
当用户用不同类型或版本的浏览器打开时,可以返回不同的页面,以保证用户的正常浏览。 单击快速启动板中的“Behavior”按钮,点“+”号,在下拉列表中选择“Check Browse”。
45> 网页中可以随便拖动的对象是怎么建立的?
访问网站时,经常能见到不少可以用鼠标拖动的元素,其中以图片居多,比如,一张广告图片挡住了你想浏览的内容,你完全可以用鼠标选中把它扔到一边去!
制作这种效果是通过图层的“Drag Layer”行为实现的,单击Behavior面板中“+”号,选择“Drag Layer”,当然之前你必要保证目标图层处于选中状态,进行简单设置后就OK了。
Dreamweaver如何应用源格式
今天在用 DW 试写一段 AS ,突然想,DW是不是有像FLASH一样的“自动套用格式”,这样的话,html文件的源码看起来就很工整了。其实这个想法很早就有了,只是一直没找到这个功能,今天在同事的帮助下终于找到了,试用一下,很好,很实用。并且自动把Tab转换成了空格,很方便网站后台的录入工作。
但是CSS文件使用此功能就感觉不适应了(个人感受),页面拉得很长。
操作:“命令”菜单 -> 应用源格式
- 默认分类(20)
- J2EE(25)
- Java(56)
- PHP(55)
- SEO(10)
- 网页设计(20)
- 网站建设(37)
- 数据库(7)
- JavaScript(17)
- JQuery(6)
- MySQL(20)
- SQL Server(6)
- Access(1)
- Oracle(6)
- office(6)
- Dreamweaver(4)
- Photoshop(12)
- Flash(9)
- Fireworks(13)
- CSS(14)
- HTML(4)
- .NET(7)
- ASP(2)
- DB2(1)
- Ajax(2)
- Linux(12)
- Struts(7)
- Hibernate(8)
- Spring(2)
- Jsp(22)
- Asp(8)
- C#(3)
- C++(1)
- 网络安全(5)
- 软件工程(7)
- XML(1)
- English(2)
- 计算机等级考试(2)
- 计算机病毒(4)
- 个人日志(76)
- 互联网(15)
- ActionScript(10)
- Android(3)
- 数据结构与算法(1)
- 游戏策略(3)
- 美文翻译(2)
- 编程开发(19)
- 计算机应用(4)
- 计算机(10)
- Unity3d(6)
- 其他(1)
- egret(1)