导航:首页 > 万维百科 > 简单网页设计特效代码

简单网页设计特效代码

发布时间:2020-10-23 04:01:17

1、谁知道有哪些制作网页特效的好软件啊?

网站设计八步骤 由于目前所见即所得类型的工具越来越多,使用也越来越方便,所以制作网页已经变成了一件轻松的工作,不像以前要手工编写一行行的源代码那样。一般初学者经过短暂的学习就可以学会制作网页,于是他们认为网页制作非常简单,就匆匆忙忙制作自己的网站,可是做出来之后与别人一比,才发现自己的网站非常粗糙,这是为什么呢?常言道:“性急吃不了热豆腐”。建立一个网站就像盖一幢大楼一样,它是一个系统工程,有自己特定的工作流程,你只有遵循这个步骤,按部就班地一步步来,才能设计出一个满意的网站。 一、确定网站主题 网站主题就是你建立的网站所要包含的主要内容,一个网站必须要有一个明确的主题。特别是对于个人网站,你不可能像综合网站那样做得内容大而全,包罗万象。你没有这个能力,也没这个精力,所以必须要找准一个自己最感兴趣内容,做深、做透,办出自己的特色,这样才能给用户留下深刻的印象。网站的主题无定则,只要是你感兴趣的,任何内容都可以,但主题要鲜明,在你的主题范围内内容做到大而全、精而深。 二、搜集材料 明确了网站的主题以后,你就要围绕主题开始搜集材料了。常言道:“巧妇难为无米之炊”。要想让自己的网站有血有肉,能够吸引住用户,你就要尽量搜集材料,搜集得材料越多,以后制作网站就越容易。材料既可以从图书、报纸、光盘、多媒体上得来,也可以从互联网上搜集,然后把搜集的材料去粗取精,去伪存真,作为自己制作网页的素材。 三、规划网站 一个网站设计得成功与否,很大程度上决定于设计者的规划水平,规划网站就像设计师设计大楼一样,图纸设计好了,才能建成一座漂亮的楼房。网站规划包含的内容很多,如网站的结构、栏目的设置、网站的风格、颜色搭配、版面布局、文字图片的运用等,你只有在制作网页之前把这些方面都考虑到了,才能在制作时驾轻就熟,胸有成竹。也只有如此制作出来的网页才能有个性、有特色,具有吸引力。如何规划网站的每一项具体内容,我们在下面会有详细介绍。 四、选择合适的制作工具 尽管选择什么样的工具并不会影响你设计网页的好坏,但是一款功能强大、使用简单的软件往往可以起到事半功倍的效果。网页制作涉及的工具比较多,首先就是网页制作工具了,目前大多数网民选用的都是所见即所得的编辑工具,这其中的优秀者当然是Dreamweaver和Frontpage了,如果是初学者,Frontpage2000是首选。除此之外,还有图片编辑工具,如Photoshop、Photoimpact等;动画制作工具,如Flash、Cool 3d、Gif Animator等;还有网页特效工具,如有声有色等,网上有许多这方面的软件,你可以根据需要灵活运用。 五、制作网页 材料有了,工具也选好了,下面就需要按照规划一步步地把自己的想法变成现实了,这是一个复杂而细致的过程,一定要按照先大后小、先简单后复杂来进行制作。所谓先大后小,就是说在制作网页时,先把大的结构设计好,然后再逐步完善小的结构设计。所谓先简单后复杂,就是先设计出简单的内容,然后再设计复杂的内容,以便出现问题时好修改。在制作网页时要多灵活运用模板,这样可以大大提高制作效率。 六、上传测试 网页制作完毕,最后要发布到Web服务器上,才能够让全世界的朋友观看,现在上传的工具有很多,有些网页制作工具本身就带有FTP功能,利用这些FTP工具,你可以很方便地把网站发布到自己申请的主页存放服务器上。网站上传以后,你要在浏览器中打开自己的网站,逐页逐个链接的进行测试,发现问题,及时修改,然后再上传测试。全部测试完毕就可以把你的网址告诉给朋友,让他们来浏览。 七、推广宣传 网页做好之后,还要不断地进行宣传,这样才能让更多的朋友认识它,提高网站的访问率和知名度。推广的方法有很多,例如到搜索引擎上注册、与别的网站交换链接、加入广告链等。 八、维护更新 网站要注意经常维护更新内容,保持内容的新鲜,不要一做好就放在那儿不变了,只有不断地给它补充新的内容,才能够吸引住浏览者 ★要想学做网页,首先得了解制作网页的工具。 制作网页主要有以下一些工具 Frontpage:office自带的一个工具,操作简单,实用,学起来比较轻松,功能不咋地,我不太喜欢。 Dreamweaver:这是网页三剑客之一,专门制作网页的工具,可以自动将网页生成代码,是普通网页制作者的首选工具,界面简单,实用功能比较强大。建议初学者选用。 另外一个工具就是代码编辑工具,例如写字本、EditPlus等,这些工具主要编辑asp等动态网页。 此外还有一些网络编程工具,javascript、java编辑器等。 网页制作也是一个比较吃香的行业,要真正做一个好的网站,还必须有良好的设计功底。所以还得学很多边缘性的软件,例如photoshop、flash等。 大型的网站往往还需要数据库的支持,所以还得懂数据库。sql、甲骨文等。 总之,掌握好网页制作,能独立完成一个网站的制作工作,那就不要考虑吃饭问题。随便混就好了! 祝你成功。 ★你可以结合 Dreamwaver 和 Photoshop 来制作网页。 Dreamwaver 可以到这里下 30天试用版,不过要先登记一个免费帐号, http://www.macromedia.com/cfusion/tdrc/index.cfm?proct=dreamweaver ★在网上有这方面的教程 教程 http://www.nease.net/xhelp/ http://school.jz173.com/ (中国建站专家) 主页和个人空间 http://home4u.china.com/ (中华网) http://www.35.com/yumingzc/yumingzc.asp 建议使用网页制作三剑客Dreamweawer+Firework+Flash 或使用Frontpage

2、怎样使用网页设计模板和网页特效代码

使用网页设计模板和网页特效代码,一般这种模版都会给一定提示,例如在什么位置去插入,然后告诉通过一个什么函数来调用,然后只需要在DW中打开模版,根据自己需要的地方,更改文字,或者是图片就可以了。

3、谁有网页特效制作的方法啊?

一.设置滚动字幕
设置标题文字“欢迎光临童心童话网站”为交替滚动字幕。
方法一:添加代码
<marquee behavior="alternate">欢迎光临童心童话网</marquee>
尝试scroll(滚动)和slide(滑动)两种其它模式。
方法二:常用-标签选择器-HTML标签-页元素,选中marquee,在右侧属性中设置behavior和direction。

二.弹出信息对话框
1. 单击“body”标签未选中任何页面元素,打开右侧标签检查器中的【行为】面板,选择【弹出信息】命令,弹出“弹出信息”对话框,在对话框中输入“欢迎光临童心童话网!”。
2.单击【确定】按钮返回。

三.设置状态栏文本
1.单击“body”标签未选中任何页面元素,打开【行为】面板,选择【设置文本】级联菜单下的【设置状态栏文本】命令,弹出对话框。
2.在对话框中输入“纯真的年代,美丽的心情,梦想的乐园!”,单击【确定】按钮返回。
3.在【行为】面板控制事件中选择onLoad事件。
4.保存文件,浏览网页效果。

四.页面上飞来飞去的小动画
1.打开常用下拉列表,选择“布局”—“描绘层”,拖出一个层对象,选中层,选择“插入”—媒体—Flash,插入“donghua”Flash对象。
2.选中层对象,选择【修改】菜单【时间轴】级联菜单中的【录制层路径】命令,沿着要使动画飘动的路径拖动层对象。
3.在下方的时间轴面板上选中“自动播放”和“循环”复选框。
4.在浏览器中预览,可看到层对象顺着刚才拖动的路径运动。

五.弹出式菜单(index.htm)
1.选中导航条中的“外国童话”,在链接中输入“#”回车,设置空链接,打开【行为】面板,选择【显示弹出式菜单】命令,弹出“显示弹出式菜单”对话框。对话框的【内容】选项卡,在【内容】选项卡的文本输入框中输入菜单项的名称:格林童话,单击菜单旁的 按钮,添加菜单选项:安徒生童话、伊索寓言,单击 按钮,可以删除不想要的菜单选项。链接栏可为菜单选项设置超级链接。
2.单击【外观】,显示【外观】选项卡,可在【外观】选项卡中设置弹出式菜单的文字格式、一般状态和鼠标滑过状态文本和单元格的颜色属性等;单击【高级】,显示【高级】选项卡,可在此设置单元格的大小、间距、边框等属性;单击【位置】,显示【位置】选项卡,可在此设置相对于控制对象弹出式菜单显示的位置。
3.设置完成,单击【确定】按钮返回。

六.弹出浏览器(播放flash)
1.新建一个基本页,保存为ad.htm文件。
2.插入一个2行2列的表格,合并第一行,选择“插入”—媒体—Flash,插入“sanxing” 三星显示器广告Flash对象。在属性面板上为其命名“sanxing”。
3.在第二行2个单元格中分别插入b1、b2两个图片,设置居中。选中“播放”按钮,打开【行为】面板,选择【控制Shockwave或Flash】命令,在对话框中选择“播放”单选钮,单击【确定】按钮返回。在【行为】面板控制事件中选择onClick事件。同样设置“停止”按钮。
4.保存文件,打开index,单击“body”标签,打开【行为】面板,选择【打开浏览器窗口】弹出对话框。选中ad.htm,设置窗口大小为520*460,选中“调整大小手柄”。保存,在IE浏览器中浏览,用户可以通过两个按钮控制动画播放。

七.制作交换图像
1.新建一个html文件。
2.设置1行8列表格,插入t1-t8八张图片。鼠标单击选中图像,分别在属性面板上给图像命名从左到右依次为t1~t8。
3.选中最左边的图像t1,打开【行为】面板,选择【交换图像】,在对话框中选中第1项“图像”t1””,单击“设定原始档为”栏右边的【浏览】按钮,在弹出的对话框中选择图像t2;选择第2项“图像”t2””, “设定原始档为” t3;……选择第8项“图像”t8””,“设定原始档为” t1。单击【确定】按钮返回。
4.用同样的方法为每一幅图像设置【交换图像】行为。比如选中图像t2,在“交换图像”对话框中设置“图像”t1””交换为t3,“图像”t2””交换为t4……。如此一来,可实现鼠标经过图像不断向前移动的效果。其它图像以此类推。
对设置交换图像行为的一点补充说明:
使用交换图像行为可以创建按钮变换(鼠标经过图像效果)和其他图像效果(如本例的一次变换多幅图像)。交换图像动作可以通过改变代码中的图像源文件属性将一幅图像变换为另外一幅图像,因此,变换图像的尺寸(宽度和高度)应该与初始图像一致。

4、请高手写个网页制作的特效代码,在线等,采纳追加100分

就是这些代码,如果你不满意我倒找你100分!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" ></FCK:meta>
<title>超酷的旋转图片特效</title>
</head>
<body>
<style type="text/css">
body{background:black}
.point{position:absolute;height:120px;}
</style>
<script>

var r=200,dv=0.01,w=100,x=400;y=100,pn=8; //r半径,dv偏移量,w图片宽度,x菜单横坐标,y菜单纵坐标,pn菜单图片数量
var pi=Math.PI,d=pi/2;
var pd=Math.asin(w/2/r),ed=pi*2/pn,sm;//pd各个图片的反正弦
function goR(){
var o=document.getElementById('imground');
var arrimg=o.getElementsByTagName('img');
for (var n=0;n<arrimg.length;n++){
arrimg[n].onmouseout=function(){sm=setInterval('roundMove()',50);} //鼠标离开菜单后继续转动
arrimg[n].onmouseover=function(){clearInterval(sm)} //鼠标移上菜单停止转动
arrimg[n].onmousedown=function(){dv=dv*2} //鼠标单击菜单加快转到速度
}
sm=setInterval('roundMove()',50);
}

function roundMove(){
var v=document.getElementById('imground');
var arrimg=v.getElementsByTagName('img');
var o,ta,strFilter;
for (var n=1;n<=pn;n++){
o=arrimg[n-1];
ta=Math.sin(d+ed*n);//获得当前偏移量的正弦值

strFilter='';
if (ta<0){//正弦值对应为负弧度,即图片旋转到圆的背面
o.style.left=Math.cos(d+ed*n-pd)*r+x+'px'; //传入当前图片移动的横坐标
}
else{//当图片旋转到圆的正面时
o.style.left=Math.cos(d+ed*n+pd)*r+x+'px';//传入当前图片移动的横坐标

}

o.style.top=ta*10+5+y+'px'; //传入当前图片移动的纵坐标
o.style.width=Math.abs(Math.cos(d+ed*n+pd)-Math.cos(d+ed*n-pd))*r+'px';
o.style.zIndex=parseInt(ta*10);

if (o.style.zIndex<0){//当图片旋转到居后的位置时翻转图片
strFilter='FlipH(enabled:true)';
}
else{ //当图片旋转到前面的位置时显示图片正面
strFilter='FlipH(enabled:false)';
}

if (ta<0){
ta=(ta+1)*80+20;
}else{
ta=100;
}

strFilter=strFilter+' alpha(opacity='+ta+')'; //透明效果(针对IE)
o.style.opacity=ta/100; //透明效果(针对非IE)
o.style.filter=strFilter; //在菜单图片上加入滤镜效果
}
d+=dv; //增加偏移值
}
</script>
<div id="imground">
<img class="point" src="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg"/>
<img class="point" src="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg"/>
<img class="point" src="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg"/>
<img class="point" src="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg"/>
<img class="point" src="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg"/>
<img class="point" src="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg"/>
<img class="point" src="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg" _fcksaverl="http://img.lingd.net/attachments/date_201101/.jpg"/>
<img class="point" src="http://img.lingd.net/attachments/date_201101/.gif" _fcksaverl="http://img.lingd.net/attachments/date_201101/.gif" _fcksaverl="http://img.lingd.net/attachments/date_201101/.gif"/>
</div>
<script language="javascript">goR();</script>
</body>
</html>

5、请教网页设计高手鼠标特效代码代码求大神帮助

鼠标移上去就打开页面: 第一步:把如下代码加入<body>区域中 <SCRIPT Language="JavaScript">function winopen () {msg=open("update.htm","NewWindow","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=yes,width=400,height=260");}</SCRIPT> 第二步:把如下代码加入<body>区域中 <a href="链接地址" onMouseOver="winopen(); return true;"><IMG SRC="shu.gif" border="0"></a> 自动跳转的话这个度试看 <a href=" 链接地址" onMouseOver="指定页面"><IMG SRC="shu.gif" border="0"></a> 不行的话加我Q吧 我这个只是理论的写写 没实现过 你试试看吧

满意请采纳

6、刚学习网页设计,在网上下了一些特效。但是不知道如何使用 插入这些代码。谢谢

1.引用样式文件css/wmiis.css
<link href="css/wmiis.css" type="text/css" rel="stylesheet" />

2.引用jquery的库文件js/jquery.js

<script type="text/javascript" src="js/jquery.js"></script>

3.引用效果的具体js代码文件js/lrtk.js复制至html文件中。

<script type="text/javascript" src="js/lrtk.js"></script>

4.将id为zSlider的div的内容复制到您的html文件

将需要加效果地方将id为zSlider的div的内容复制到您的html文件

然后预览一下就可以看到了。

当然,你必须把wmiis.css,jquery.js,lrtk.js 这些文件放到你的文件对应文件夹中。

7、有没有人知道网页制作特效的代码介绍的比较好的网站,推荐我看看!

http://www.helpor.net/
http://www.baron.com.cn/javascript/
http://js.wanxu.com/
http://www.dabaoku.com/texiao/
http://www.8695.com/netweb/
http://www.sgzld.com/life.htm
http://www.3lian.com/zl/3lian/3/
你自己选吧,里面什么都有

8、制作网页特效应该建立一个怎么样的网业啊?万分感谢``

看什么特效了,用CSS 和HTML 能建立特效啊,不用动态的。

建立特效用基本页(CSS+HTML)就可以了,这样不设计模板和动态的问题,可以专注特效。
当然用模板(建立站点的时候用,学习特效不用)和动态页(ASP JSP等,需编程序,复杂,一般用不着的)也可以

9、如何快速制作网页特效

1.打开你需要的带特效的网站,单击菜单栏(上面)的查看-源文件.然后找到你需要的特效的代码段(用dreamweaver软件容易找些),复制~粘贴~改代码(最好先了解javascript语言~否则比较麻烦)
2.先获得你要变换图片的控件(用ById),然后写个方法~在里面写个循环,或者用随机数获得图片并且附给你要变图片的控件,(所有的图片名必须有规律~比如1.jpg,2.jpg),最后在方法里写个计时器setTimeOut(方法名,每过多少毫秒执行一次)
3这些东西必须要有JAVAscript的基础~否则建议先学去

10、Dreamweaver使用,网页特效代码制作

首先用ps或者其他软件将几张图片的大小p成一样的。比如笔者把三张图片都p成了200x268的大小。

2
打开Dreamweaver,新建一个网页(笔者这里建立一个html类型的网页)。

3
按Ctrl+S保存新建的网页。

4
点击菜单栏:插入-->表格。插入一个1行1列的表格。

5
把鼠标指针放到表格中,单击菜单栏的:插入-->布局对象-->AP Div,插入一个AP Div。

6
把鼠标放到刚刚新建的AP Div里边,点击菜单栏的:插入-->图像,选择一张需要插入的图片。

7
按上面的方法依次添加其他几个AP Div,并在里边插入图片。

接下来插入一个AP Div,然后再里边添加一个1行3列的表格。

鼠标指针放到表格第一个方框中,单击菜单栏:插入-->表单-->按钮。操作如图

鼠标点中添加的按钮,然后再下方属性面板中,把值修改为1。

按照上述步骤依次为表格的第二个框、第三个框添加一个按钮,并把属性值改成2和3。如图

把几个AP Div移动到同一个区域。如下图

单击菜单栏:窗口-->行为,打开行为面板。

鼠标点击第一个方框的按钮,点击标签检查器行为面板下方的“+”号,弹出的菜单中选择“显示-隐藏元素”。

按照下图所示,把AP Div1设置成显示,AP Div2设置成隐藏,AP Div3设置成隐藏。AP Div4可以设置成显示,也可以不设置(默认显示)。

如图,点击行为面板左边的英文,在弹出的菜单中选择onFocus。

按照上面的步骤,依次把表格第二个方框、第三个方框的按钮设置成如下图所示。
这样就做好了。按F12在浏览器中看看效果。

与简单网页设计特效代码相关的知识