网页设计变化

1、网页设计未来趋势

现在大的公司都是在细化工作，比如效果图可能是一个部门，这个部门只负责效果图的设计，设计完之后，会转交给相关的部门，做成HTML的形式，也就是网页设计师一般说的切图；然后再提供给相关的程序员，写成程序，后台代码；
所以大的方向来说，还是很有发展前途的

2、html页面制作呈现效果变化原因？

只是设计风格有变化，html分的没那么详细，就算是html5他也是html的一部分，只是新加了一些特性，标签等一些东西，直接看页面是看不出来的，css同理c3说白了也是css不存在版本这种东西。
新闻网页一般比较朴实，没那么多花里胡哨的东西，毕竟广告之类的东西不多，动态特招也没多少，很多也都是js写的。

3、网页制作以后会在哪个领域作用和改变？

Internet的迅速普及，正是依靠不计其数、丰富多彩的网站。 网站是由网页按照一定的链接顺序组成。现在有越来越多的人希望在网络上拥有自己的个人主页或个人网站，来展示个人的个性和特点。 同时也有越来越多的企业通过互联网上来展示自身形象，提供服务和产品资讯。 以这种廉价的方式获取最大的宣传效果。

所以说，网页制作已经成为现代社会中人们的一种基本功，越来越多的人希望学习如何制作网页， 同时越来越多的网页制作工具展现在人们面前。当然掌握所有的网页制作工具是不可能， 也是不必要的。本课程主要讲解目前最受欢迎的，也是最流行的网页制作工具， 以及这些工具之间如何搭配使用，使学习者能够快速方便地制作出网页。
现状
网页设计如果单指的设计的话,那么设计会是一直平稳的发展方向的,设计方面的一直都会向一个平稳的方向发展,平面设计也一样的,但是在设计方面要有最好的灵感,和设计思维,那么这个方面的人才可能会有百分之三十到四十左右,如果是在网页的静态方面这个还有发展的前景,要看发展以后的技术,排版技术更加精通的也许占到百分之三十左右,所以如果想在这方面发展好的话可以是让这两个方面兼容的

4、网页设计 图片自动变化

||">
.container, .container *

.container

.slider
.slider li
.slider img

.slider2
.slider2 li

.num
.num li{
float: left;
color: #FF7300;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 12px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #FF7300;
background-color: #fff;
}
.num li.on{
color: #fff;
line-height: 21px;
width: 21px;
height: 21px;
font-size: 16px;
margin: 0 1px;
border: 0;
background-color: #FF7300;
font-weight: bold;
}
</style>
<div class="container" id="idTransformView">
<ul class="slider" id="idSlider">
<li><img src="images/01.jpg"/></li>
<li><img src="images/02.jpg"/></li>
<li><img src="images/03.jpg"/></li>
</ul>
<ul class="num" id="idNum">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>

<br />

<div class="container" id="idTransformView2">
<ul class="slider slider2" id="idSlider2">
<li><img src="images/01.jpg"/></li>
<li><img src="images/02.jpg"/></li>
<li><img src="images/03.jpg"/></li>
</ul>
<ul class="num" id="idNum2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div><br />
<p>
<script type="text/javascript">
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};

var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}

Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}

var TransformView = Class.create();
TransformView.prototype = {
//容器对象,滑动对象,切换参数,切换数量
initialize: function(container, slider, parameter, count, options) {
if(parameter <= 0 || count <= 0) return;
var oContainer = $(container), oSlider = $(slider), oThis = this;

this.Index = 0;//当前索引

this._timer = null;//定时器
this._slider = oSlider;//滑动对象
this._parameter = parameter;//切换参数
this._count = count || 0;//切换数量
this._target = 0;//目标参数

this.SetOptions(options);

this.Up = !!this.options.Up;
this.Step = Math.abs(this.options.Step);
this.Time = Math.abs(this.options.Time);
this.Auto = !!this.options.Auto;
this.Pause = Math.abs(this.options.Pause);
this.onStart = this.options.onStart;
this.onFinish = this.options.onFinish;

oContainer.style.overflow = "hidden";
oContainer.style.position = "relative";

oSlider.style.position = "absolute";
oSlider.style.top = oSlider.style.left = 0;
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Up: true,//是否向上(否则向左)
Step: 5,//滑动变化率
Time: 10,//滑动延时
Auto: true,//是否自动转换
Pause: 2000,//停顿时间(Auto为true时有效)
onStart: function(){},//开始转换时执行
onFinish: function(){}//完成转换时执行
};
Object.extend(this.options, options || {});
},
//开始切换设置
Start: function() {
if(this.Index < 0){
this.Index = this._count - 1;
} else if (this.Index >= this._count)

this._target = -1 * this._parameter * this.Index;
this.onStart();
this.Move();
},
//移动
Move: function() {
clearTimeout(this._timer);
var oThis = this, style = this.Up ? "top" : "left", iNow = parseInt(this._slider.style[style]) || 0, iStep = this.GetStep(this._target, iNow);

if (iStep != 0) {
this._slider.style[style] = (iNow + iStep) + "px";
this._timer = setTimeout(function(), this.Time);
} else {
this._slider.style[style] = this._target + "px";
this.onFinish();
if (this.Auto) , this.Pause); }
}
},
//获取步长
GetStep: function(iTarget, iNow) {
var iStep = (iTarget - iNow) / this.Step;
if (iStep == 0) return 0;
if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
return iStep;
},
//停止
Stop: function(iTarget, iNow) {
clearTimeout(this._timer);
this._slider.style[this.Up ? "top" : "left"] = this._target + "px";
}
};

window.onload=function(){
function Each(list, fun){
for (var i = 0, len = list.length; i < len; i++)
};

var objs = $("idNum").getElementsByTagName("li");

var tv = new TransformView("idTransformView", "idSlider", 168, 3, {
onStart : function()) }//按钮样式
});

tv.Start();

Each(objs, function(o, i){
o.onmouseover = function(){
o.className = "on";
tv.Auto = false;
tv.Index = i;
tv.Start();
}
o.onmouseout = function(){
o.className = "";
tv.Auto = true;
tv.Start();
}
})

////////////////////////test2

var objs2 = $("idNum2").getElementsByTagName("li");

var tv2 = new TransformView("idTransformView2", "idSlider2", 408, 3, {
onStart: function()) },//按钮样式
Up: false
});

tv2.Start();

Each(objs2, function(o, i){
o.onmouseover = function(){
o.className = "on";
tv2.Auto = false;
tv2.Index = i;
tv2.Start();
}
o.onmouseout = function(){
o.className = "";
tv2.Auto = true;
tv2.Start();
}
})

$("idStop").onclick = function()
$("idStart").onclick = function()
$("idNext").onclick = function()
$("idPre").onclick = function()
$("idFast").onclick = function() }
$("idSlow").onclick = function() }
$("idRece").onclick = function() }
$("idAdd").onclick = function() }

$("idReset").onclick = function(){
tv2.Step = Math.abs(tv2.options.Step);
tv2.Time = Math.abs(tv2.options.Time);
tv2.Auto = !!tv2.options.Auto;
tv2.Pause = Math.abs(tv2.options.Pause);
}

}
</script>

5、动态网页制作 图像变化

用纯falsh制作一个网站,就可以实现这个功能了

6、如何从网页设计变成前端开发

如果你从事前端开发的话、必须要会的如下
css2.0+div,必备
css3.0了解
html4.01必备
xhtml了解
JavaScript必备
ps必备
Jquery必备
前端是有一个证，就叫网页设计师，证书好像需要两千块钱的。一般不看你的证书，你只要能独立的完成页面的设计就行了。以上的你都差不多的话，你完全可以去坐前端开发了。前端开发的好处就是随时都可以可视化调试。可是缺点就是浏览器的兼容性不同，一些样式调来调去的。

7、网页设计的发展有什么新的变化

网页设计未来发展趋势是【高清设计】

网页设计中最热门的技巧之一，就是高清背景图，这得益于高清显示屏的普及。

运用图片、视频、或是动画来创建高清背景，并且把所有内容有层次地组合。图片

超大图、焦点图、全屏图。

8、网页设计的诞生与演变

网页的诞生，对于老网民来说,好像很久很久以前的故事了，其实,到目前为止也就是十几年的时间。它期间，网络技术的发展变化使人目不暇接，可以说它的演变周期是以“天”来计算的。

第1章 可能性的探索
网络技术的日新月异的变化给网页设计带来了新的表现天地。在网络世界里，技术始终起着先导作用，设计见分晓随着技术的发展而发展、变化。
浏览器这个新技术的出现使得信息传达与思想交流得以在网页中实现。可以说网页设计这个概念也是在这个时期开始了萌芽。在浏览器的发展初期，网页页面上还无法显示图像、声音、影像等要素，必须启动其它辅助软件才能实现，但是，很快这些技术问题便得到了解决。现在好像已经是理所当然的事情，可在当时这是一个多么在的惊喜啊。网页设计师们像得到了法宝，大家赶快在网页中加进了这些新的要素。从那时起，诸如shockwave、Future Splash(现叫Flash)以及各种Movie、Java等新技术发表后，这样的行为就反复地出现。但不管怎么说，随着各种技术的不断发展，瘰曾经出现在出版印刷、广播电视以及光盘等媒体上的表现形式，逐渐地在网页设计上也同样成为了可能。
这种“既然可能，那就试试”的想法的第一个“受害者”就是网页的下载速度。虽然这种丰富的实验性网页看上去与其它的网页有所不同，但是，那种图像的乱贴，各种技术的滥用所导致的结果使得网页的下载时间成倍的增长。更严重是任何信息也无法传递出去。当然，无论是网页设计师还是用户，都希望网页更有抵魅力、更有感染力。但是，如果它失去了必要的平衡关系的话，其结果是事与愿违。这种设计构想与技术（下载速度等等）的冲突矛盾，至今还持续着。也许，这种冲突将永远无法得到解决。因为，无论传送速度如何地改善，网络用户都将不断地增加，而且，随着传送速度的提高，网页设计师们又会想出很多新的表现手法，他们的探索与尝试是不会停止的。

第2章 形式与结构
从“网页”这个称呼来看，我们就应该明白，当初创造它的科学家们仅仅是把它作为一种可以共享的“文书”来使用的载体则设想为“低”。
随着网络商业行为被人们所接受，越来越多的人参与进来。人们使用因特网与利用因特网的目地与其诞生初期产生了很多不同，变得多元化了。随之而来的便是各种各样的探索与尝试因特网广告、电子商务、电子出版、网上商店等等。到这时；正式概念上的“网页设计”雏形终于诞生了。当然，在此之后，在此之前，服务器上的以及电脑与电脑在文件流通上的“设计”是一直存在的，这种设计是如何地重要是毋庸置疑的。但是，作为可视的，人与人在交流层次上的网页设计，才是人们最需要的，才是人们直接地实现自己理想的手段。
在网页设计的发展初期，设计家们就发现，无法保证自己所设计制作的内容完全不变地再现于网页之中。浏览器在解释文本语言的构造后，并通过页面来显示时，会出现一些偏差与变异，显然它没有充分考虑到更容易让它人控制的解读方式。作为人与人之间的有效的交流手段来说，它还存在太多的缺陷。对于这些问题进行了一系列的探索，想了很多不得已的办法。比如用本来是做表格的标记格式来控制页面的构图，用透明GIF图像来调整间距，用图像方法来进行文字设计等等。虽然，这些技巧无法解决所有问题，而且，这种做法对于重视结构的HTML来说会带来许多不利的问题，但是，这种做法所带来的好处在重视这些好处的人们之间，很快传播开来。现在，CSS方案被提出与普及，人们才真正朝着解决“形式与结构”这个问题上前进了一步。

第3章 设计方针的变迁
仅仅十几年的时间，网页设计的流行倾向就经历了几次巨大的转变。其中之一就是对机能性重视的演变。在一两年前，因特网上许多著名的网站都陆续地改变了自己的网页设计风格，网站的制作重点都更加倾向于对可操作性，功能性的重视。原因之一便是随着用户和访问频率的急剧增加，导致网站必须把多余的纯装饰性的东西省略，以提高网站的可读性，另一个原因是，各个网站已经积攒了一定的经验，渐渐明白什么是应该提供的信息，哪些服务是重要的哪些是不重要的。现在较多的媒体型网站以及软硬件公司的网站上，还有网上商店等到电子商务型网站上，均可以看到这样的变化。人们最关心的门户网站也是如此。
去掉多余的图像来提高速度，这是对机能性的重视，但是，如何使用户更快更容易地找到需要的信息，如何让用户更快地了解网页上的信息质量，如何引起用户的兴趣等等，还有如：什么样的信息放在什么样的栏目里，应该起什么样的名称，这些信息应该是以什么样的形式来设计，比如说文章应该分多少页来显示，每页的量又应该是多少，标题应该如何设计，图像该有该无等等，都对信息的传递效果起到很大的影响。另外，电脑屏幕是平面的，我们无法直观地了解网站信息的立体结构；比如说，从一本书的外观厚薄上，我们可以直接地感到其信息量的多少，无论阅读到哪里，我们也可以轻而易举地知道已经看了多少，还有多少没看，但在网页里，我们却很容易迷失方向。如何使用户能更快地把握网站的立体结构，如何使用户穿梭自由，这些都是每一个网页设计师应该注重的问题，这也是重视机能的根本所在。对待不同的内容，不同的目的必须采取不同的设计手法。如果在这一点上概念模糊，定位不准的话，肯定给读者带来的是不快与烦恼，也是浪费读者的时间与精力。

第4章 关于速度
速度是网页设计类学的基本要素。“没有迅捷的传送速度，就没有好的设计”很多从事此项设计的人都相信这句神话。
针对传送速度的限制，出现了许多新的设计方案。比如，在HTML之上，设很多层页，利用这些层页可进行植字，重叠排版的技术（CSS），它使设计者们实现了用有限的资料来提供更多内容的想法。在CSS出现之前，要设计一个理想的标题只能用平面图像，因此在一定程度上对传送速度产生了影响。使用CSS的话，字体，正确的文字尺寸，文章中的行距以及在画面中的位置等都可以得到自由的调整，另外，使用像Macromedia的Flash一样的Vektor Graphc Fomart图像处理格式，更可以在不降低画面效果的情况下，不精确地完成文字字体的选择与字体的设计，然而，不依赖以上技术也同样可以提高下载速度。掌握几个简单的方法就能使用迅速地等到需要的内容。例如，利用HTTP的特征，灵活使用压缩手法也可以提高浏览速度，把几个图像统一为一个，就比把它们分割成众多的小图像好得多，因为，浏览器在读取图像的时候，是一幅一幅读取的，每幅图像的读都必须进行数次接续交换，这种交换次数越多下载速度就越慢。如果把小的图像统一起来，变成一个指南图来利用，即使单个文件变得大一些，因数据交换次数少了，下载速度也会有所提高。
如何使自己的网页变得更加轻巧。如何进一步提高网页的下载速度,主要有两点必须考虑：

4．1、简洁的HTML构成
4．2、减少每一幅图像的容量（bytes）
所谓“简洁的HTML构成”不是以前那种没有任何设计的简单网页。而是在网页设计的排版构图上，使我们能够设计出理想的构图。但是，表格技术又有其弊病，如果把表格设计得过分复杂的话（比如过分使用表格之中套表格等手法的话），浏览器在解释与显示它时就会花过多的时间。所以简洁的表格设计构成是提高下载速度的一个关键。随着网页商业化的普及，在网页上，商品图像的登载已成为必然的事情。如果登载的照片没有经过精心的加工，下载它所需要的时间是难以想象的，用户会因此对你的网页产生反感。为了避免这样的结果。应在允许的范围内，把图像压缩到最小程度，因为计算机上的图像是由一个点的像素组成的，所以这些像素点的多少便是使图像的容量产生变化的主要原因。在用Photoshop加工图像时，JPEG的压缩率由1%到100%大致可分为10个档次，当然1%的压缩率最高，图像的信息量（像素）被压缩到最少，但对图像质量的伤害太大，一般不适合采用。相反，100%的压缩率最小，图像质量很好，但是，文件太大，也不适合采用。一般是在30%到50%之间进行压缩。GIF在减色时也分很多档次，可在1色到256色间变化。

第5章 简洁明了
“简洁”也是网页设计的基本要素。在设计网页时，我们必须充分考虑到用户在阅读网页时的心理状态，要让读者在最短的时间里，迅速地理解网页里所提供的信息内容。在用户进入网页的数秒以内，给他一个好印象，引起他的兴趣，才是最重要的。这就要求设计简洁，主次分明，并通过明了易懂的网页指南向用户介绍网站内容。最终把用户吸引到网站里。
5．1、滚动条的限制
在设计网页时，对于重要的信息最好是在不滚屏的状态下完全地显示出来，这是一下最理想的状态。但是，由于种种原因，这种状态无法在所有情况下保持，即使如此，我们也应该尽量使它只出现一个滚动条，要么是上下滚动，要么是左右滚动。过多的滚屏会防碍用户对整个网页的理解。
5．2、统一网页形象
这个概念来自于企业形象设计系统（CIS）的设计原理。这个原理在网页设计中也同样适用。这个系统会加强网页的整体形象，以及页面与页面之间的统一性和整体感。使用户对网页能产生更深刻的印象。
5．3、网页指南系统
因为网页的阅览方式是不定的，跳动性的，也可以说是含糊不清的，如果没有明确的指南引导，我们的用户将不知何去何从。这样便容易导致他们离开这里。那么，该如何做呢？我们知道读者阅览网页的方式是自由的，跳动性的，所以我们就要做到无论读者在网站里的什么位置上，都可以自由地跑到其它想去的页面上。这就要求我们在所有的页面上都设有复数的连接点。而且最好是一次点击就可以进去。其实，网页设计与建筑设计在很多原理上是很相似的，首先骠设计一个精彩的店面，因为给顾客留下的第一印象是很重要的，然后要有很多道路以及电梯等设备，尽快使顾客到达自己要去的地方，并明白所处的方位。如何去其它的楼层，在那里有些什么等等。让你的顾客迷路是一种最危险的行为，因为在网上的顾客会马上跑到其它的网站里。
制作网页指南的要点在于简明易懂以及使用上的简单便利。无论你自己认为是多么优秀的设计，用户不明其意，或者不知如何使用的话，一切都等于零。而且， 如果用户为了看到想要的信息要经过数次点击，也是不可取的。以最少的点击获得最多的结果是网页设计的一个原则。据调查，如果主页的访问率为100人次，经过第一次点击到达下一页的访问率将下降到30到50人次，再下一页的话，访问率会减少到10到20 人次。这个调查说明，网页的层次越复杂，内容的实际访问率也将越低，情报也就越难传达到读者那里，所以，尽量把网页的层次简单化，力求以最少的点击次数连接到具体的内容。最理想的是只通过两三次点击就可以到达目的地。
第6章 图像制作
图像的下载速度决定着网页显示的快慢。HTML文件对下载速度没有太大的影响，对速度影响最大的还是图像，所以，如何把图像做得精致恰当，选用什么样的压缩方式也是提高下载速度的关键。
6．1、JPEG和GIF
现在网页上经常使用的图像压缩方式还是以JPEG与GIF为主。这两种压缩方式选择哪一种更好呢？这是由设计时的具体情况决定的。
GIF的压缩方式与人们的读书方法是一样的，从左向右，由上到下。图像在用GIF格式保存时，加工软件是由左上端的像素开始，然后向右扫描，然后再由下一端的左边开始，就这样反复地扫描压缩。如果是由一些不同的色素点组成的复杂纹样的话，它就无法进行有效的压缩，在平涂颜色面积较大的情况下，渐变色彩较少的图像，使用GIF形式压缩比较合适。虽然它不适合照片的压缩，但是，如果照片等图像的尺寸小于100*100px的话，用GIF形式压缩也是比较合适的。
JPEG是一个摄影团体发明的压缩方式，它最适合照片之类图像的压缩，图像的压缩率可以自由调整。适于大幅图像的制作，随着压缩率的提高，下载速度也就会相应提高。色彩复杂的图像选择JPEG形式的理由是，这种形式可以保存几百万种像素。而GIF形式的像素保存却被限制在256种之内。JPEG形式的缺点是随着压缩率的提高，图像的质量便会越来越差。另外，如果要修改这些图像的话，应该打开24比特（bit）的原始图像进行修改与变更尺寸。因为通过这两种形式保存的图像，在质量上都有所降低，若把它们打开再一次修改再一次变更尺寸保存的话，它们的质量就会有明显的下降。
6．2、图像的容量（bytes）
在用 Photoshop进行了图像制作时，无法正确了解图像的容量（bytes）图像左下端的数值也并非图像的真正容量。要起了解图像的真正容量，最简便的办法就是选择菜单的“Getinfo“命令。在这里我们可以了解它在硬盘上占有的空间，以及文件本身的真正的容量。
6．3、图像的格式
在网页中可以插入的图像有两种:普通图像和动画。普通图像的格式如表6－1所示。

格式 含义
GIF Graphics Interchange Formats的缩写，CompuServer公司1987年推出GIF标准，并于1989年和1990年更新，目前标准是89a，256色，可以在所有的浏览器中观看
JPEG Joint Photographics Experts Group开发的图片格式，以开发小组的缩写表示，JPEG保留RGB图片中的所有颜色信息，通过选择性地去掉数据来压缩文件，JPEG图片在打开时自动解压缩
BMP DOS和Windows兼容计算机系统的标准Windows图片格式，Windows与OS/2的位图格式不同
TIFF 标签图片文件格式，用于在应用程序之间和计算机平台之间交换文件，是一种灵活的位图图片格式，为所有绘画、图片编辑和页面排版应用程序支持。而且几乎所有桌面扫描仪都可以生成TIFF图片
PCX Z-Soft Painbrush格式，用于IBM PC兼容计算机上。大多数PC软件支持PCX 5
PNG Portable Network Graphics（可移植网络图形）缩写，是作为GIF的免专利替代品而开发的，支持颜色索引、灰度和真彩色图像，需要特殊的插件支持才能显示，用于在World Wide Web上无损压缩和显示图像
EPS 封装的PostScript文件，用于在应用程序间传输PostScript语言图稿
而动画格式有许多种，Dreamweaver支持的动画常用的有数种：
1、GIF动画――GIF动画实际上是将几幅GIF图像循环播放而形成的动画图像。GIF动画的制作工具很多，其中Microsoft公司的Gif Animator是最常用也是最好用的工具。
2、SWF动画――Flash动画，目前最为流行的网页动画，可以是高质量的矢量动画。
3、视频――有AVI视频、QuickTime视频、RM视频和MPEG等数种。
在网页中，我们可以在背景图片的上面加上一个透明Flash动画，使原本不会动的图片变的更加生动,从而使网页多姿多彩。[5] 图片格式（P38）
结论:
在网页设计时一定要选择质量好，容量小的图像为网页快速的下载速度和留住访问者打下基础，同时，统一的网页结构和布局也是提高网页的显示速度和网站的可读性必要因素.

9、网页设计中怎样改变各内容的前后顺序 怎么设置

这个叫内边距（margin）和外边距（padding），你需要设置全局样式
*{paddin:0;margin:0}
img{border=none;}
这样你的图片和框就没边距了。
你要靠哪一边就用left right top down 如：margin-left="20px;"(内部左边距20像素)
很简单的 多练两次就ok了

10、网页设计 页面内容变化

您好，这是个简单轮播加上选项卡的综合
首先你要会做选项卡，就是点击不同的导航栏，下面的内容会变化，就是只显示点击的该导航栏选项所对应的下面图片信息，其他的都隐藏。
不点击会自动轮播，可以设置间歇调用就行了，请参考轮播图的做法。