网页特效让你的家园更美丽

 更新时间:2016年9月20日 19:05  点击:1879
我相信随着网络技术的普及,现在已经有很多朋友都在 Internet 建立了自己的 “家园” ,但你有没有为那奇低无比的访问量而着急呢!有没有想过改变这种现状呢?今天我就向大家介绍两款不同的软件,通过他们一定能够让你的家园更美丽。

  A、网页特效:AnFY

  要知道“家园” 不受欢迎的很大程度是因为里面没有炫丽夺目的网页效果,而有的只是平淡无奇的文字,毫无生气的图片等,而现在首先要向你介绍的 AnFY 就是一款可以化腐朽为神奇的网页特效制作软件(http://www.anfyteam.com/ln/chisimp/ajdownl.html)。
将软件下载并且安装之后,我们就可以从开始菜单中启动它了。软件通过向导的方式来建立各种不同的特效,因此我们使用起来不是很复杂。

  首先选择要制作的特效所属的大范围,这里一共有六大类供我们可以选择,其中由上到下对应的中文意思是横幅/幻灯片,数学效果图,图形特效, 3D动画,菜单,其它。在每一种其中又包括了相关的几种类型,例如我们这里先选择图形特效(Image effects),然后在下拉菜单中选择 “Water”(水波) ,这也就是图形特效下的一个具体类型,这个时候如果你对所选择的类型制作出来到底是一个什么样的效果还不是很清楚的话,可以点击“Applet preview”来预览程序默认的效果。如果觉得这样还可以的话,那么就可以点击“next”进入下面的设置了(如图1)。



  在这里我们就要来添加具体的图形和详细的设置了,点击上方的“Browse”来添加一张自己定义的图片,例如自己的照片啊,然后设置“Resolution”,值为1的时候是默认值,如果该值为2则表示放大一倍,而Width、Heighth的值也会自动随之变化。(如图2)



  至于其它的设置值建议大家在初次使用时都保持默认值,就这样根据向导一直点击“Next”一直到(如图3)所示的界面,这个时候我们的Java特效就基本制作完成了,这个时候就可以点击“Preview”来预览我们制作出来的水纹波动的效果,如果没有什么修改的话,就可以把该代码复制之后插入到具体的Html页面中去了 网页中的背景设计是相当重要的,尤其是对于个人主页来说,一个主页的背景就相当于一个房间里的墙壁地板一样,好的背景不但能影响访问者对网页内容的接受程度,还能影响访问者对整个网站的印象。如果你经常注意别人的网站,你应该会发现在不同的网站上,甚至同一个网站的不同页面上,都会有各式各样的不同的背景设计。究竟都有哪些不同样式的背景,还有它们的设计方法都是怎样的呢,现在就由我来为大家作一个比较完整的总结。
 

  1.颜色背景
 

  颜色背景的设计是最为简单的,但同时也是最为常用和最为重要的,因为相对于图片背景来说,它有无与伦比的显示速度上的优势。在网页文件中,一般通过<body>标签来指定页面的颜色背景,其HTML语法为:

<body bgcolor="color">
 

  其中的"color"表示不同的颜色,可以用各种不同的颜色表示方法,比较常用的有直接用颜色的英文名称,如blue、yellow、black等等,还可以用颜色的十六进制表示方法,如#0000FF、#FFFF00、#000000等等,此外还可以用百分比值法和整数法,其效果都是一样的。

  颜色背景虽然比较简单,但也有不少地方需要注意,如要根据不同的页面内容设计背景颜色的冷暖状态,要根据页面的编排设计背景颜色与页面内容的最佳视觉搭配等等。

  2.沙纹背景
 

  沙纹背景其实属于图片背景的范畴,它的主要特点是整个页面的背景可以看作是局部背景的反复重排,在这类背景中以沙纹状的背景是为常见,所以我们将其统称为沙纹背景。

  初学主页制作者都有这样的经历,当试图把自己的照片作为页面的背景是,却发现浏览器上显示出来的不仅仅是一个照片,而是同一照片在水平和竖直方向上的反复排列。这就是浏览器处理图片背景时的规律方法,利用这一规律我们可以用一小块图片作为页面背景,让它自动在页面上重复排列,铺满整个页面,从而使网页的体积大大减小。

  读者到现在恐怕都已经知道了沙纹背景的原理和实现方法,就是找一个小的图片,越小越好,但注意要使最后的背景看起来要像一个整体,而不是若干图片的堆砌。其实现的HTML语法如下:

<body background="picture">
 

  其中的"picture"表示背景图片的URL路径。

  3.条状背景
 

  条状背景与沙纹背景是比较相似的,它适用于页面背景在水平或竖直方向上看是重复排列的,而在另一方向上看则是没有规律的。它也是利用浏览器对图片背景的自动重复排列,与沙纹背景所不同的是它只让图片在一个方向上重复排列。

  以在竖直方向上排列为例,首先用图像处理软件做一个从左到右为蓝白渐变的水平条状图片,其长度与页面的宽度相当。也通过

<body background="picture">
 

  将其设为页面背景,经浏览器显示后,就成为整个页面从左到右蓝白渐变的分栏颜色背景。当然,也可以用类似的方法实现条状背景在水平方向上的重复排列。

  4.照片背景
 

  把自己或朋友的照片作为页面的背景让大家看到,是有点令人激动的事情,但浏览器对图片的自动重复排列却使这一愿望难以实现。怎么办呢?只有想不到的,没有做不到的,这里我们用上一点简单的CSS。在网页文件的<head>……</head>之间加入下面的CSS语句:

<style type="text/css">
<!--
body{background-image:url(myphoto.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:50% 50%}
-->
</style>
 

  这样,在网页页面中,就可以看到你的照片位于页面的正中间,而且在拉动浏览器窗口的滚动条时,照片仍然位于页面的正中间而不随页面内容一起滚动。如果你觉得照片位于页面的正中间不满意,你也可以随意地调整它在页面中的位置,只需要调整"background-position"的值就可以了。

  5.复合背景
 

  如果你在练习上面的“照片背景”时“不小心”也设置?lt;body>标签里的颜色背景,那么你看到了什么?颜色背景还起作用吗?对,你能看到你的照片浮于你设的颜色背景之上,二者能够同时正常地显示出来。这就是复合背景的魅力,更为吸引人的是,当你所设置的图片背景因为某种不可知的因素而不能正常显示的时候,浏览器能够自动用你所设置的颜色背景取而代之。它的设计方法,就不用我再多说了吧!

  6.局部背景
 

  前面我们所说的背景都是整个页面的背景,能不能在页面上为某个局部的内容设置属于它自己的背景呢

  提示:使用前请把大写状态下"<>"改为小写状态下的"<>"

  01.让背景图不滚动

  IE浏览器支持一个 Body 属性 bgproperties,它可以让背景不滚动:

  〈Body Background="图片文件" bgproperties="fixed"〉

  02.让你的网页无法另存为

  <noscript><iframe src=http:///htmldata/2005-12-26/*></iframe></noscript>

  03.让IFRAME框架内的文档的背景透明

  <iframe src="about:<body style='background:transparent'>" allowtransparency></iframe>

  04.禁止右键:

  <body oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false"onmouseup="document.selection.empty()">

  05.进入页面后立即自动刷新?

  <meta http-equiv="refresh" content="120;url=http://">

  http://,这是你自己的网址。

  06.打开窗口即最大化

  <script language="JavaScript">

  <!-- Begin

  self.moveTo(0,0)

  self.resizeTo(screen.availWidth,screen.availHeight)

  // End -->

  </script>

  07.能隐藏IFRAME的滚动条吗?我知道的三种方法:

  1. 设置iframe scrolling="no"

  2. 被包含页body应用overflow:hidden

  3. 被包含页的body标签加scroll="no"

  08.加入背景音乐

  <bgsound src="http:///htmldata/2005-12-26/mid/windblue[1].mid" loop="-1"> 只适用于IE <embed src="http:///htmldata/2005-12-26/music.mid" autostart="true" loop="true" hidden="true"> 对Netscape ,IE 都适用

  09.嵌入网页

  <iframe name="tt" src="http:///htmldata/2005-12-26/webjx.html" width="450" height="287" scrolling="Auto" frameborder="0"></iframe>

  10.跳转

  <meta http-equiv="refresh" content="3;URL=list.htm">

  11.滚动

  <MARQUEE direction=up height=146 onmouseout=start() onmouseover=stop() scrollAmount=4>网页教学网滚动文字</marquee>

  12.细线分隔线

  <hr noshade size=0 color=#C0C0C0>

  13.过度方式

  <meta http-equiv="Page-Exit" content="revealTrans(Duration=3,Transition=5)">

  Duration的值为网页动态过渡的时间,单位为秒。

<

    目前,china.com主页日常更新的有五方面内容:"头条链接"、"频道精选"、"专题特集"、 "图片推荐"和"精彩推荐"。

    一、头条链接

    头条链接数量为9条,推荐内容以时事新闻为主,约占6-8条,若有重要的体育、娱乐、IT等新闻,也可在该位置推荐。推荐数量和选择性由新闻部决定。推荐邮箱:news@sz.china.com。

    二、频道精选

    1. 推荐内容要紧扣频道名称,应尽量避免和其他频道内容的冲突。真正做到体现频道本色。
    2. 推荐内容要符合社会、政治以及道德舆论主流,尽量避免有损党和政府形象、血腥暴力、色情低俗的内容。
    3. 推荐内容一定要注明信息来源(即便是网友原创也要注明),并保证不牵扯版权问题。
    4. 推荐内容的标题字数限制在16字以内。链接必须是终极页面的URL。
    5. 一定要等推荐内容镜像到北京才可发送邮件推荐。
    6. 推荐内容发送到统一邮箱:best@sz.china.com。

    三、专题特集
    专题特集推荐内容是各频道制作的较大型的专题或专栏。在主页陈列的时间一般较长。专题页面的数量通常不少于10页。

    推荐"专题特集"的程序:

    专题制作编辑(填写"专题推荐申请表")→频道监制(审核签字)→网页设计部主管(审核签字)→策划总监或资讯总监(审核签字)→首页编辑→添加到主页完成。

    四、图片推荐

    频道精选右侧为"图片推荐"位置。更新频率为每日或半日。图片也应不涉及版权问题(严禁推荐带有色情和政治丑化色彩的图片)。另外,推荐内容要有一定时效性和独特性。

    推荐直接发送到邮箱best@sz.china.com,包含要素为图片(质量要清晰,高160X宽120~140),文字说明标题,终极页面URL。

    五、关于"精彩推荐"

    "精彩推荐"是在原有"专题特辑"中分离出的一个推荐区。其更新频率原则上为三至五天。和"专题特集"不同之处在于,它推荐的范围更广泛,精彩推荐可以是新闻的追踪报道等,页面数量在5页以上。

    推荐直接发送到邮箱best@sz.china.com,包含要素推荐标题(标题字数限制在10个字以内),终极页面URL。

    请各频道监制和编辑有意识的维护china.com主页形象,认真斟酌、推荐本频道优秀内容。




  网页设计伴随着网络的快速发展而快速兴起,作为上网的主要依托,由于人们使用网络的频繁而变得非常的重要。网页讲究的是排版布局,其功能主要就是提供一种形式给每个上网者,让他们能够了解网站提供的信息。

  从网络的发展来看,网页设计从无到有,从低级到高级,是基于技术的原因而受到客观的限制的,因为受传输带宽的限制,最早的网页是纯字母和数字的,没有图片和声音更别说是动画了,只能将占用空间很小的数字和字母来进行传输。

  由此看来网页最初就是在功能性的基础之上发展起来的。到今天同样上网也离不开使用它的功能,所以网页的审美就首先要考虑其功能的要素(例如很多国外的大公司的网站也是这样做的)。那么从功能出发来看待网页设计,我们就必须考虑,使用者如何从网页中得到功能,如何更好的得到功能。这就需要站在使用者的角度来看待网页设计,才能使自己做出的网页受欢迎,从而达到基本的目的。有的网页设计师说:我是设计师,我站得比普通人高,欣赏水平也比他们高,应该引导潮流,应该引导他们学会欣赏美的网页。作为设计师引导潮流没有错,但是不应该采用居高临下的方式,而是要贴近自己的使用对象,想他们所想,急他们所急,方便他们的使用,适时的将自己的设计风格融入到作品中去,接受他们的检验,只有经得起考验的设计才是好的设计。而不是所谓的阳春白雪,成为孤家寡人,不适用。作为设计师来说,就是要把自己的网页做得美一些(基于功能性的)。

  谈到美,网页这种特殊环境下的美于传统的艺术上的审美有着明显的区别,因为一般的艺术上的美是海阔天空,无所顾忌的,只要符合人们的欣赏的习惯,能够在欣赏者的心里产生共鸣就是美的;而网页的布局上的审美却要受到很多的限制,当然它也有优于传统艺术的地方,最明显的就是它的交互性和更新速度的快捷,纯艺术很大程度上是作者的自我宣泄,但是网页设计直接面对的是大量用户,随时都会反馈回来对网页的批评建议等,可以根据实际情况进行修改,比如在建站时考虑不周到的地方,设计时没有得到重视的地方,可以根据要求进行调整。同样不损整体效果,却可以使使用者用起来更加的方便。这个过程可以在很短的时间里完成。同时网页能融合文字、图片、声音、动画于一身。这是传统艺术所达不到的。当然最根本的在使用方面就限制了它不能够随意的挥洒自如,任设计师自由的发挥。以下针对网络环境下的审美。

  首先:要考虑上网者的环境,通常可见的情况是:上网者眼睛盯着一个冷冰冰的电脑屏幕,手移动鼠标,保持一定的姿势,而且一般是连续很长的时间。在这种情况下,假如连接的网站的网页做得很差,不考虑排版布局的形式美的要素,一味的以刻板的文字或者是图片来充斥这个页面,那么使用者看久了就会厌倦,甚至讨厌。同样在网络世界里,五花八门,涉及到各方面的内容,使用者通常是打开很多的窗口,在一种纷繁复杂的情况下接受信息。这样假如他们浏览的网页是设计得又是特别花哨,图片、文字、动画等等堆砌的极为杂乱,那么更加剧了这种心理上的厌烦感,这种网页能算得上美吗?所以从使用环境里的功能的因素来考虑美才是最根本的。

其次:考虑使用对象本身也是网页审美的一个重要方面,网页设计都是为每个具体的网站的做宣传,那么不考虑对象就如同闭门造车,这样会造成其根本的功能的损失,使使用者浏览起来困难。例如一个儿童网站,设计得如同一些新闻专题的网页一样,纯粹是文字。那么使自己的使用对象-儿童在浏览该网站的时候毫无兴趣,阻碍了网站的基本的目的,因为该网站的目的就是要使更多的儿童来光临这个网站,从而扩大网站影响。从这个功能层面上来理解,设计的美是同使用对象分不开的。

  再者:网页设计的美其实是一个满足使用者需求的过程,能够使他们使用起来方便快捷,排除他们使用中的问题,这就是美的,这就是纯粹从功能上的要求出发的。就是最根本的功能被满足就是最根本的美。不是吗?假如我想上一个体育的网站了解一下当天的足球战报,那么我上网的目的性就是非常的明确,直接看足球的结果。那么考虑一下我的上网过程就是先敲入网址,到主页上,然后尽快的找到足球的栏目,再找到比分的链接。那么设计师如果考虑到上这个网站的很多人都非常想知道足球的比分,那么在主页上放上一个流动的临时更新的框,就可以使上站的使用者直接在主页上看到想要看的东西,这样快速而又方便的结果,其实质上是一个网页设计的成功的地方,这种网页就是美的,反之假如把网页设计得非常的“漂亮”(这里指的是纯粹的从艺术审美上的漂亮,满足一般的形式美的要求的,而不考虑使用环境的情况),但是把该链接做到不容易找到的地方,或者是由于满足“漂亮”的要求,增加了几级的链接,从而增加了使用者的不方便,这种网站也是不美的,至少它没有为自己的使用对象考虑,就是失败。

   还有一个美的因素也不能不考虑,就是网站本身,其实也是功能来决定的,作为网站的目的就是要通过使用者的使用来得到体现,如何使更多的人来使用和使他们浏览过之后记住这个网站?也就是通过自己的设计使网站的形象得到提升,使网站的形象在每个使用者的心目中扎根。这是现在网页设计中普遍不受重视的,也许是还欠缺这种意识,才出现这种情况,有些网页做得很有味道,不管是用色还是布局的编排,都是非常的讲究,但是却没有注意到网站的本身的东西,例如网站的名称或者是网址没有得到强化,尽管使用了之后觉得好,但是第二次使用时却记不起是什么网站了,因为上网通常要看很多的网站,每一个都记录下来是非常不方便的,很多网友也不愿意这样做,

<
[!--infotagslink--]

相关文章

  • 怎么用PS为人像脸部增加打散颗粒特效

    用PS将人像脸部打造成打散颗粒的效果,成品出来后很美,过程略复杂,需要耐心和细心。现在跟着步骤来做吧! 1、首先在PS里面打开这张图。 2、选择快速选择工具的增加...2016-12-21
  • php根据用户语言跳转相应网页

    当来访者浏览器语言是中文就进入中文版面,国外的用户默认浏览器不是中文的就跳转英文页面。 <&#63;php $lan = substr(&#8194;$HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08
  • 腾讯视频怎么放到自己的网页上?

    腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题,要把腾讯视频放到自己的网页有许多的办法,当然一般情况就是直接使用它们的网页代码了,如果你要下载资源再放到...2016-09-20
  • 基于JavaScript实现网页倒计时自动跳转代码

    这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
  • 网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别

    我们现在使用的软件都会自动在前面加一个申明了,那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢?下面我们就一起来看看吧. 单...2016-09-20
  • js实现可爱的气泡特效

    这篇文章主要为大家详细介绍了js实现可爱的气泡特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-09-05
  • C#实现Winform中打开网页页面的方法

    这篇文章主要介绍了C#实现Winform中打开网页页面的方法,涉及WinForm中WebBrowser的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
  • Go语言通过http抓取网页的方法

    这篇文章主要介绍了Go语言通过http抓取网页的方法,实例分析了Go语言通过http操作页面的技巧,需要的朋友可以参考下...2020-05-05
  • vue如何在用户要关闭当前网页时弹出提示的实现

    这篇文章主要介绍了vue如何在用户要关闭当前网页时弹出提示的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-01
  • ThingJS粒子特效一键实现雨雪效果

    在做3D项目时,我们经常需要模拟下雨,下雪的天气,有时也会模拟喷泉、着火等效果。这些效果需要使用名为粒子系统(particle)的技术来实现。使用ThingJS可以快速编写粒子效果,本文就来看看如何实现...2021-05-29
  • C#抓取网页数据 解析标题描述图片等信息 去除HTML标签

    本文主要一步一步介绍利用C#抓取页面数据的过程,抓取HTML,获取标题、描述、图片等信息,并去除HTML,希望对大家有所帮助。...2020-06-25
  • 分析网页的几种加密技术

      现在专业性的网站越来越多,许多网友们都在网上建立起了自己的小家。不过辛辛苦苦制作的网页被人拿去改头换面却是件非常痛心的事,所以大家都想保护自己独创的...2016-09-20
  • 如何在网页中制作虚线表格

      在制作网页的时候,常常要遇到制作虚线表格的问题,下面的文章就能解决这个问题。  方法一:作一个1X2的图。   半黑半白,再利用表格作成线。这种方法虽然麻烦...2016-09-20
  • 网页页面控制注意事项

    1、检查标题。2、检查版权信息,尤其是电话号码。3、图片、文件定位问题。4、产品页面首页指向产品类别问题。5、文章页面首页指向文章类别问题。6、产品图片大小...2016-09-20
  • ASP.NET使用HttpWebRequest读取远程网页源代码

    本文分享了一个使用HttpWebRequest读取远程网页的案例,供大家参考学习。...2021-09-22
  • 基于javascript html5实现3D翻书特效

    这篇文章主要介绍了基于javascript html5实现翻书特效的实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-03-18
  • Illustrator设计细腻的网页纹理背景制作教程

    今天小编在这里就来给Illustrator的这一款软件的使用者们带来的详细的设计细腻的网页纹理背景的制作教程,各位想知道具体制作步骤的,那么下面就快来跟着小编一起看看教...2016-09-14
  • 忠告:网页设计必须注意的29个问题

    当你在INTERNET这个信息的海洋中尽情遨游时,会发现许许多多内容丰富、创意新颖、设计独特的个人网页,不知道你见到这样漂亮可人的网页是否有点心动。一旦你具备了...2016-09-20
  • python 自动刷新网页的两种方法

    这篇文章主要介绍了python 自动刷新网页的两种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-20
  • 原生js轮播特效

    这篇文章主要为大家详细介绍了原生js轮播特效,简单实用的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-22