网页设计效果
html css JS 怎么设计点击回顶部效果？
点击回顶部，或是回某个位置，主要是设置scrollTop。下面是一个简单回顶的例子：下面的例子是缓慢回顶。如果将快速回顶，可以直接让scrollTop = 0；就可以了。<style> body{height:5000px;} input {position:fixed; bottom:0px; right:0px;} </style> <script> window.onload=function(){ var oBtn = document.getElementById('btn'); var timer = null; var bFlag = false; oBtn.onclick=function(){ moveScroll(0,3000); }; window.onscroll=function(){ if(bFlag) { clearInterval(timer); } bFlag=true; }; function moveScroll(target,time) { var start = document.documentElement.scrollTop || document.body.scrollTop; var dis = target - start; var count = Math.floor(time/30); var n=0; clearInterval(timer); timer = setInterval(function(){ n++; bFlag=false; document.documentElement.scrollTop = start + dis*n/count; document.body.scrollTop = start+dis*n/count; if(n==count) { clearInterval(timer); } },30); } }; </script>
网页设计 鼠标滑过 图片自动放大怎么做的代码，或者如何做？
鼠标经过图像后弹出一个浮动层然后放大该图像，基于JavaScript的一个实现。需要事先准备好被放大的图片和缩略图，程序加载完图像后才能看到效果，这也是一个不完美的地方，仅供参考学习。参考一下下面的网址，看下那种比较适合你。http://js.alixixi.com/a/2016303062402.shtmlhttp://www.codefans.net/jscss/code/2563.shtmlhttp://www.51xuediannao.com/js/jquery/jquery_fangda/
Dreamweaver软件是什么？它的主要功能有什么？
Adobe Dreamweaver，简称“DW”，中文名称 "梦想编织者"，是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，DW是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。 功能：借助共享型用户界面设计,在AdobeCreativeSuite4的不同组件之间更快、更明智地工作。使用工作区切换器可以从一个工作环境快速切换到下一个环境。 具体功能： 1、利用AdobeDreamweaverCS6软件中改善的FTP性能，更高效地传输大型文件。更新的“实时视图”和“多屏幕预览”面板可呈现HTML5代码，使您能检查自己的工作。 2、自适应网格。使用响应迅速的CSS3自适应网格版面，来创建跨平台和跨浏览器的兼容网页设计。利用简洁、业界标准的代码为各种不同设备和计算机开发项目，提高工作效率。直观地创建复杂网页设计和页面版面，无需忙于编写代码。 3、改善FTP性能。利用重新改良的多线程FTP传输工具节省上传大型文件的时间。更快速高效地上传网站文件，缩短制作时间。 4、Catalyst集成。AdobeBusinessCatalyst集成，使用Dreamweaver中集成的BusinessCatalyst面板连接并编辑您利用AdobeBusinessCatalyst（需另外购买）建立的网站。利用托管解决方案建立电子商务网站。 5、增强型jQuery移动支持。使用更新的jQuery移动框架支持为iOS和Android平台建立本地应用程序。建立触及移动受众的应用程序，同时简化您的移动开发工作流程。 6、更新的PhoneGap支持。更新的AdobePhoneGap支持可轻松为Android和iOS建立和封装本地应用程序。通过改编现有的HTML代码来创建移动应用程序。使用PhoneGap模拟器检查您的设计。 7、CSS3转换。将CSS属性变化制成动画转换效果，使网页设计栩栩如生。在您处理网页元素和创建优美效果时保持对网页设计的精准控制。 8、更新的实时视图。使用更新的“实时视图”功能在发布前测试页面。“实时视图”现已使用最新版的WebKit转换引擎，能够提供绝佳的HTML5支持。 9、CSS3/HTML5支持。通过CSS面板设置样式，该面板经过更新可支持新的CSS3规则。设计视图现支持媒体查询，在您调整屏幕尺寸的同时可应用不同的样式。使用HTML5进行前瞻性的编码，同时提供代码提示和设计视图渲染支持。
网页设计 图片滚动代码
素材的准备。为了更好的表现网站的风格和特色，具备一些更富表现力和吸引力的图片是必不可少的。同理，准备了一些与网页主题密切相关的图片，用于做为实现图片滚动效果的素材。打开Dreamweaver8，新建一网页文件，并保存为名为“index.html"文件。切换至代码编辑界面，输入如下代码：<body><div id="photo-list"> <ul id="scroll"> <li><a href="#"><img src="images/1.jpg" width="100px" height="100px" alt=""/></a></li> <li><a href="#"><img src="images/2.jpg" width="100px" height="100px" alt=""/></a></li> <li><a href="#"><img src="images/3.jpg" width="100px" height="100px" alt=""/></a></li> <li><a href="#"><img src="images/4.jpg" width="100px" height="100px" alt=""/></a></li> <li><a href="#"><img src="images/5.jpg" width="100px" height="100px" alt=""/></a></li> <li><a href="#"><img src="images/6.jpg" width="100px" height="100px" alt=""/></a></li> </ul> </div></body>对应效果如图所示：新建一CSS样式表文件，并将该文件保存到与“index.html”相同的目录下，文件名称为“MyStyle.css"。在新建的样式表文件"MyStyle.css”文件中输入如下代码：* { padding:0; margin:0;} /*设置所有对像的内边距为0*/body { text-align:center;} /*设置页面居中对齐*/#photo-list {/* 6张图片的宽度（包含宽度、padding、border、图片间的留白）计算：6*(100+2*2+1*2+9) - 9 之所以减去9是第6张图片的右边留白 */ width:681px; /* 图片的宽度（包含高度、padding、border） 计算：100+2*2+1*2 */ height:106px; margin:50px auto; overflow:hidden; /*溢出部份将被隐藏*/ border:1px dashed #ccc; } #photo-list ul { list-style:none;} #photo-list li { float:left; padding-right:9px;} #photo-list img { border:1px solid #ddd; background:#fff; padding:2px;}对应文件内容如图所示：在网页文件"index.html"中添加对该样式表的引用：<link rel="stylesheet" type="text/css" href="MyStyle.css">此时网页效果如图所示：新建一个JS文件，并将该文件另存为“MoveEffect.js"。在”MoveEffect.js“文件中输入如下所示代码： var id = function(el) { return document.getElementById(el); }, c = id('photo-list'); if(c) { var ul = id('scroll'), lis = ul.getElementsByTagName('li'), itemCount = lis.length, width = lis[0].offsetWidth, //获得每个img容器的宽度 marquee = function() { c.scrollLeft += 2; if(c.scrollLeft % width <= 1){ //当 c.scrollLeft 和 width 相等时，把第一个img追加到最后面 ul.appendChild(ul.getElementsByTagName('li')[0]); c.scrollLeft = 0; }; }, speed = 50; //数值越大越慢 ul.style.width = width*itemCount + 'px'; //加载完后设置容器长度 var timer = setInterval(marquee, speed); c.onmouseover = function() { clearInterval(timer); }; c.onmouseout = function() { timer = setInterval(marquee, speed); }; };然后在主页文件"index.html”中添加对该“MoveEffect.js”文件的引用。<script type="text/javascript" src="MoveEffect.js"></script>代码如图所示：打开“index.html”网页文件，最终效果如果所示：
网页设计和web前端开发哪个好
一个是偏向于设计，一个是偏向于代码。如果是网页设计，刚开始可能是模仿别人的网页，但是到了最后会出现慢慢的偏重于美术，心理学，色彩，绘画等。这些艺术方面，表面你能看到的，如果你是学计算机的接触过网页设计，并喜欢网页设计，我建议不要偏向这个方面，因为到后来让你自己独立设计网页时，色彩搭配是很难的，还有整体布局，以及是否符合当下潮流等。现在的网页千变万化，设计也要不断学习，并且能跟得上。 对于web前端开发这个就是把别人设计好的自己用div+css+js去实现的，一个简单的网页可能就是div+css把它写出来，但是这里面是充满经验的。web前端的发展过程中到了最后就是头疼的兼容性问题，因为要确保一个页面在任何浏览器当中能正常显示是很不容易的，浏览器厂商那么多，各自还有自己的专属属性，而且有的还要求在手机中能够显示，能够自适应屏幕等。单纯的css无法来控制，就需要学习javascript, web前端看似简单其实要学习的东西很多，经验也特别重要，接触后台后你会更明白前端的重要性。
学习网页设计步骤
首先要了解HTML（超文本设计语言），记住使用原理；接着用两三天的时间学习CSS（层叠样式表单）；进而再花些时间了解一下javascript软件。掌握这些基础性知识后，就可试着用“记事本”编写网页，在初试阶段千万不要用那些可视化工具，如FrontPage、Dreamweaver，否则将不利于锻炼实际能力。
网页设计中如何让图片轮播
网页设计中让图片轮播，需要用到的JS和比较好的div+css布局意识，主要还是需要了解left，top在css中的意思，这里我提交一段我以前写的代码； html中的代码：<div id="box"> <div id="woZaiHouDun" class='hide' > <a id="btnLeft" href='javascript:void(0);'> </a> <a id="btnRight" href='javascript:void(0);'> </a> <ul> <li><img width="400" height="260" src="./images/scholl/1.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/2.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/3.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/1.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/2.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/3.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/1.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/2.jpg"/></li> <li><img width="400" height="260" src="./images/scholl/3.jpg"/></li> </ul> </div>js中的代码：ar t=null;function woZaiHouDun(){ var oUl = document.getElementById('woZaiHouDun').getElementsByTagName('ul')[0]; var aLi = oUl.getElementsByTagName('li'); oUl.innerHTML += oUl.innerHTML; oUl.style.width = aLi[0].offsetWidth*aLi.length + 'px'; var oBtnLeft = document.getElementById('btnLeft'); var oBtnRight = document.getElementById('btnRight'); var iTarget = 0; var ispeed = -3; oBtnLeft.onclick = function(){ ispeed = 3; } oBtnRight.onclick = function(){ ispeed = -3; } t=setInterval(function(){ iTarget = oUl.offsetLeft -ispeed; if( iTarget < - oUl.offsetWidth/2){ oUl.style.left =0 +'px'; iTarget = oUl.offsetLeft -ispeed; } if( iTarget > 0){ oUl.style.left =- oUl.offsetWidth/2 +'px'; iTarget = oUl.offsetLeft -ispeed; } oUl.style.left =iTarget +'px'; },30)}这样是能实现轮播的。
关于网页设计尺寸和字号大小
首先网页在普通的电脑上面显示1900px的宽度会拉伸很多，这在网站的整体效果来说，访客的体验是不好的。字体大小也是根据网页的布局来设置的并没有一成不变的。
也就是说，大家会考虑设计用1500px的宽度主要是用户大多都是19寸的显示器么？那么1400的宽度被拉伸到1900px分辨率降低是自然情况么？那TB和JD为什么用19寸的显示器和24寸的显示器都没有分辨率下降的问题，是因为他们用代码写的么？谢谢了
如果能做自适应一般是没有人写死宽度为多少Px
自适应是什么啊 是PS保存WBE格式那个还是DW里面那个设置啊
网页开发中为了保证兼容大部分显示正常就采用自适应。你可以百度下。
h5页面上的动画效果是怎么制作的
很多软件都可以做啊。比如FLASH,AE,PS，当然FLASH颜色有点失真设计时候注意颜色别太丰富，AE无法做透明的，还有要注意体积，至于PS开时间轴后就只靠画比较看绘画能力。
网页设计一般需要用那些软件？
Dreamweaver、PS、FlashDreamweaver用来设计网页的元素，我们平常看到的网页中的文字、表格、特殊效果等都是可以通过Dreamweaver来实现。Dreamweaver是基本的网页代码编辑软件。它有一非常好的地方：所见即所得模式，可以让不会代码的人也能设计出简单的网页。PS是Photoshop的简称，主要用来处理图片。一个网页中如果只是文字和表格阅读质量就会下降，所以配上好的图片就非常重要了。PS是专业的图像处理软件，几乎可以做出你想要的任何图片效果。Flash用于制作动画。如果你设计的网页中需要出现动画，那么Flash是最好的选择，入门级操作就可以做出非常流畅的动画。设计网页除了软件之外，其它的只是也是必不可少的。代码方面，可能要掌握HTML语言、JS、Java、CSS等多门编程语言。
