网页设计的技巧

前言：想要写出一篇令人眼前一亮的文章吗？我们特意为您整理了5篇网页设计的技巧范文，相信会为您的写作带来帮助，发现更多的写作思路和灵感。

网页设计的技巧范文第1篇

关键词：Dreamweaver；表格；层；排版

作者简介：龙敏敏（1979-），女，湖南祁东，本科，讲师；研究方向：计算机教育教学

1Dreamweaver网页设计工具简介

浏览网页已经是现代社会人们生活中的一个重要组成部分，网页作为网络信息传播的主要载体，其设计也被大家所关注。网页设计的软件有多种，Dreamweaver是著名的“所见即所得”的可视化网站开发工具，是国内外普遍应用的专用网页设计软件。它被称为“织梦者”，即它的英文单词所表达的意思。Dreamweaver不仅提供了强大的网页编辑功能，而且提供了完善的站点管理机制。它是一个集网页创作和站点管理两大利器于一身的超重量级创作工具。网页设计的重点是版面的设计，即如何将所有的素材按照设计要求精美地罗列在页面中。所以，如何排版成为网页设计中的关键。

2使用表格和层排版

在Dreamweaver网页设计中，排版的方法有很多种，其中使用表格和层排版是基本的方法，通过设计模式可以轻松完成，简单易学，是大家常用的方法，对网页排版起到了重要的作用。

2.1表格排版

在制作网页时，要想将文本、图片等组织得美观，有条理，就需要排版人员头脑里有一个整体布局的概念。在Dreamweaver中，安排页面内容布局主要是依靠表格来完成的。通过表格的相互嵌套和合并、拆分，可以将自己的构思完整地表现出来。表格是网页设计制作时不可缺少的重要元素，它以简洁明了和高效快捷的方式将数据、文本、图片、表单等元素有序地显示在页面上，从而设计出版式漂亮的页面。使用表格排版的页面，在不同平台、不同分辨率的浏览器里都能保持其原有的布局，且在不同的浏览器平台有较好的兼容性，所以表格是网页中最常用的排版方式之一。表格排版比较规范，整体性强，一般的网页排版中都会使用表格进行整体的排版，但其表现比较中规中矩，不会有太多其他的丰富功能。

2.2层排版

层是CSS中的定位技术，在Dreamweaver中可对其可视化操作。文本、图像、表格等元素只能固定其位置，不能相互叠加在一起，使用层功能，可以将其放置在网页文档内的任何一个位置，还可以按顺序排放网页文档中的其他构成元素。层体现了网页技术从二维空间向三维空间的一种延伸。层具有很多表格所不具备的特点，比如可以重叠，便于移动，可设为隐藏，还能为层添加一些行为，使页面具有更丰富的变化等。这些特点有助于设计思维不受局限，从而发挥更多的想象力。由于它是一种新的CSS定位技术，层在具有上述优点的同时，也存在着一些不可避免的缺陷，比如兼容性、定位问题。所以，目前比较大型的网站不会单独使用层来排版。

2.3层转换成表格排版

前面提到，层与表格都可以用来在页面中定位其他对象，它们有时可以互相取代，但两者并不完全相同，有时就必须使用其中的一种。比如，当需要用到表格来排版页面，但又觉得表格的添加比较烦琐，而层比较灵活，这时候，排版者可以使用层到表格的转换来实现。具体的操作步骤是：（1）首先在层面板中勾选“防止重叠”选项，这样绘制层的时候就不会出现叠加和嵌套的现象；（2）在页面中绘制若干个层，把页面中的各元素添加到层里面；（3）把每个层自由地排列到页面中各个相应的位置；（4）使用层排版结束之后，要将层排版转化为表格排版，选择“修改”—“转换”—“层到表格”命令，在对话框中设置好相应的参数，确定之后层就会转换成对应的表格。这种排版方法在排列对象时比较灵活一点，但有时也会产生一些多余的单元格。当然，这种方法一般适用于不太复杂的页面的排版，对于比较复杂的图文混排页面，最好还是采用传统的表格排版方法。

3排版时容易出现的问题及解决方法

3.1整体表格排版出现的问题

有很多人在网页中用表格排版时习惯使用一个大表格，然后在大表格中嵌入一个个小表格，认为这保持了排版的整体性，其实这个习惯是不好的。一个大而长的表格在浏览器中打开时会加重浏览器的负担，浏览器一般是等待整个表格的内容都接收到以后才显示这个表格的内容，如果一个很长的页面使用一个大表格排版，那么这个网页显示速度就会比较慢，使得页面呈现的时间大大加长，很多时候有些网页的访问者会失去等待的耐心而放弃浏览这个网页。解决的方法是：拆分表格，将大表格化整为零，把表格打散，并要尽可能地避免表格的层层嵌套。注意，拆分后的表格的宽度要设置为相等，这样表格的排版效果和拆分前相比并没有改变，在浏览器中呈现时，页面会从上至下一个个表格呈现出来，明显加快了页面打开的速度。

3.2层排版出现位置偏差

在页面中使用表格和层混合排版时，先加入表格进行页面的整体布局，然后在局部加入层。通常情况下，层加入到页面中之后是游离在表格之上的，它虽然移动方便，但在页面中的位置是固定的，由于表格的宽度是固定像素，设置在窗口中居中显示，所以当窗口变大时，表格会产生一个相对位移，但是层却还在原位，没有跟着相对位移，因而出现层与表格中其他内容位置上的偏差。所以，层排版的灵活性同样也体现了一定的不稳定性。要想办法使层与页面中其他元素一样，能够随浏览器的变化而产生相对位置上的变化，排版者可以将层嵌入到表格的单元格中，使层成为单元格中的一个元素，就像插入到单元格中的文本、图片一样，层就是属于单元格中的对象，当浏览器窗口大小变化时，表格必然会产生相对的变化，层也就会随着单元格的位置变化而产生相应的变化，这样就不会出现页面中元素相对位置的偏差。整个排版会变得很规范，就相当于是利用表格整体排版，层只是嵌入到单元格中的一个元素，又可以使用到层的丰富功能，两全其美。解决的方法是：先使用表格对整个网页的整体进行规划，然后添加一个层到表格中的某个单元格中。添加的方法：直接将工具栏中的层拖动到单元格中，这样该层就成为该单元格的嵌入层，该层在单元格中默认是靠左对齐，垂直方向居中，而且在水平方向是不能移动的，只要移动便会脱离该单元格，即成为普通层，不会是单元格的嵌入对象，如果在水平方向一定要移动的话，可以将该单元格的位置进行调整，进而单元格中的嵌入层也会随之移动。而在垂直方向上的位置是可以调整的，不过不要用鼠标拖动，这样容易使层脱离单元格，可以选中层通过方向箭上下移动或将该单元格垂直方向上的位置由“居中”改为“顶端”或“底端”。采用这种方法设置层后，无论窗口大小怎么变化，层始终是跟着单元格位置变化而变化，因而不会出现之前那种位置上的偏差。这个问题解决之后，接下来就可以在页面中利用层的一些行为来丰富页面。

4结语

总之，网页设计中，内容虽然很重要，但是如果只有好的内容而没有精美的排版以及合理的布局，那么再好的内容也很难引起浏览者的阅读浏览兴趣。通过合理的、有新意的页面布局，特别是主页设计，才可以将网页的内容完美地呈现在浏览者面前。所以，排版者在平时要多参考他人优秀的网页排版作品，加强排版练习，这样才可能创造更漂亮的网页排版。

[参考文献]

[1]李爱军.网页的排版布局[J].办公自动化：综合版，2009（7）：29-30.

[2]艺博，张明真.网页设计与制作——MacromediaDreamweaver8[M].北京：高等教育出版社，2007.

网页设计的技巧范文第2篇

>> Flash教学课件中弹出式窗口的实现 清除Real影片播放过程中弹出的广告网页 恶意弹出网页的应对措施 弹出窗口阻止程序，不是IE的专利 轻松去除视频中自动弹出的网页 浅谈经济分析中弹性的应用 超高层结构设计中弹塑性法的分析与应用 网络用户对在线客服弹出窗口的心理抗拒与接受意愿分析 IE总是弹出脚本错误提示窗口 巧抓QQ弹出消息窗口 打开论坛弹出“安全警报”窗口等 网页设计中视觉元素的应用 FLASH在网页设计中的应用 Flash在网页设计中的应用 Photoshop在网页设计中的应用 详解网页设计中的定位应用 浅谈网页设计中的色彩应用 图层在网页设计中的应用 CSS在网页设计中的应用 井下纠偏器中弹簧的设计计算 常见问题解答 当前所在位置：l”，”width=100，height=150，menubar=0，toolbar=0”）

-->

此段代码的最终执行结果是在一个宽度为100像素、高度为150像素、没有菜单栏也没有工具条的窗口中将window.html页面打开。

二、巧妙应用弹出窗口

（一）警告性的弹出窗口

当要提示系统中有些重要的事情将要发生或者已经发生的时候，就可以利用警告窗口来实现。这类弹出窗口被设计在网页中以后，不仅仅用于警告作用，还可以用来表示一些重要通知的或者对网页用户的友好问候。弹出窗口出现以后，只要直接点击其中的确定按钮或者页面右上角的关闭按钮，就可以将其关闭。我们可以在HTML语言中应用alret命令来建立这样的弹出窗口，在具体的使用过程中，可以有两种方法来调用alret命令，一种是可以直接在HTML语言中的Body中进行使用，例如：

第二种方法是在Java脚本语言中进行调用，举例：

Alert（‘欢迎惠顾。、请收藏本站地址’）

（二）选择性的弹出窗口

当用户在查询信息的时候，有些重要内容需要在用户的甄别和选择之后才能继续查询，为此，应用选择性的弹出窗口就成为一件非常有必要的事情。在这种类型的弹出窗口中，一般情况下至少要有两个按钮，选择不同的按钮可以让网站转向不同的页面，用户在选择的时候可以根据自身的需求来进行，在具体的使用过程中，一般是在Java脚本语言中进行调用的。

（三）一般的自动弹出窗口

这种弹出窗口在网页设计中是最经常使用的一种弹出窗口了，其作用就是，当用户打开某一浏览器的窗口时，同时另外一个窗口也会随之自动打开，用来显示与网站相关的内容或者作为广告宣传的工具。在具体的使用过程中，可以在Java脚本语言中使用window.open命令来实现。鉴于篇幅原因，这里不再编写代码举例说明。

三、应用弹出窗口时应注意的原则

在进行网页设计时，同时将弹出窗口设计在网站中，可以更加方便的将一些重要的内容和信息传递给用户，而且通过弹出窗口还可以进行广告宣传。然而，当用户在查询信息的时候，当打开一个Web页面的时候，出现一个甚至多个的弹出窗口，难免会或多或少的影响到用户对信息的查看，为了更全面的观看自己的查询信息，用户还需要耐心的一个一个的将这些弹出窗口关闭或者最小化。因此，过多过快的弹出窗口的出现，甚至可能会让用户产生厌恶的情绪。所以，我们在进行网页设计的时候，如果要设计一些弹出窗口，首先要站在用户的角度去思考和观察，弹出窗口的出现会不会对用户产生不良的影响。

第一，确定弹出窗口是不是必须使用的。这个在一定程度上是由网页设计者的目的和弹出窗口所包含的内容决定的。用户最关心的就是自己要查询的信息，与此相关的一些重要通知或者信息必然会对用户产生良好的引导作用，用户往往对此持欢迎的态度。目前，很多网站上各种各样的弹出的广告窗口在弹出窗口中占有非常大的比重，要让广告达到最佳的效果，最好就是让广告的内容与网站的内容是息息相关的，否则，一般不会引起用户的关注，其广告的作用就大大降低了。因此，设计者必须考虑广告内容与网站内容的衔接关系以及用户的需要，确定出一个弹出窗口的设计是不是必须的。第二，弹出窗口的最佳出现时机的确定。当前，弹出窗口的出现时机一般可以分为三个时间段，第一个时间段就是弹出窗口伴随着网站页面的打开而打开，第二个时间段就是弹出窗口在网站页面关闭的时候打开，第三个时间段就是用户在浏览网页信息的过程中当某个触发事件发生时打开。为此，设计者在网页设计的时候就要把握好这个时机，确定好什么样的弹出窗口应该在什么样的时机出现。比如，对于一些广告类的窗口可以在用户查询信息的网页关闭的时候再出现，或者通过一些触发事件来弹出有时也会产生一些意想不到的结果。第三，弹出窗口样式的选择。弹出窗口包含有很多种不同的类型，前面已经做了说明，我们在进行设计的时候，就可以根据实际需要选择合适的类型。另外，在使用的时候，还要注意设置好合适的弹出位置，弹出窗口出现的最佳位置是页面中没有信息内容的部位，或者容易用鼠标进行操作的地方，然后根据窗口所包含的内容的容量设计窗口的高和宽的具体尺寸，至于弹出窗口中是否要设计上滚动条和工具栏等工具，则要根据实际情况来定。第四，从网站的总体来进行规划，对弹出窗口进行科学和合理的应用。如果弹出窗口中包含的内容非常多，可以用目录的形式将这些内容存放在弹出窗口中，然后为其建立超级链接，当用户要进行察看的时候，可以通过超级链接在其他的窗口中进行察看。还有很重要的一点，那就是不要不断的重复弹出内容完全一样的弹出窗口，因为弹出窗口得信息是否重要，对用户是否有用，在用户第一次见到的时候就已经决定下来了。为了尽可能节省终端电脑的资源，弹出窗口更不能无限的恶意弹出。

四、总结

本文重点介绍了在网页设计中如何更好、更规范的应用弹出窗口。为了更加方便用户的使用，弹出窗口的设计必须更加的科学和合理，只有这样，设计弹出窗口的最终目的才能得以实现，笔者相信，伴随着电脑网络技术的不断提高和发展，Java脚本语言必然将得到更加广泛的应用。

参考文献：

[1]陈邦泽,杨晓波.JAVASCRIPT与弹出窗口制作[J].甘肃高师学报,2000

[2]张志远.JavaScript与客户端安全[J].东莞理工学院学报,2002

网页设计的技巧范文第3篇

推行“CEC—CDIO做中学”课程模式，学校和企业需要在相同利益诉求和“双赢”的前提下，建立紧密的合作关系，搭建校企合作平台，培养岗位技能人才，在企业中锻炼教师的实践能力，建设“双师”结构教学团队，根据企业网页设计岗位的工作内容、工作项目和流程开发工学结合课程，提高学生岗位能力和职业素质，使得学生节课后便能参与实际的网页设计项目，提高自己的实际工作能力。与企业深度合作，选取适合网页项目交由学生完成，选派教师到企业中实践锻炼，并用自己的技术服务企业。教师和学生接手一些可操作的企业实际项目，由教师带领同学在校内模拟职场环境的实训室或企业实习基地进行设计制作，通过做中学的方式学习网页设计课程，其项目的难易程度由简单到复杂逐渐过渡，使得学生逐渐从初学者过渡到职业能手，并在适当的时机让学生到企业中参与实际工作，为企业创造经济利益的同时接触实际岗位，了解职场环境，促进职业素质和网页设计岗位能力的提高。

二、课程建设主要方面

（一）课程内容的选择

课程内容应放弃以知识点为基础的教学内容，采用以网页设计岗位需求为主要目标来选取和设置教学内容，选取企业岗位应用最广泛的内容，筛选典型的网页项目，并将项目由简单到复杂进行排序设置教学内容，每个项目是相对独立的又是知识和难度递进的，保证学生从基础逐级向高级进行学习，保证学生能够在课堂中边做边学。

（二）课程标准建设

课程标准的制定需要合作企业的网站开发岗位的人员与学校任课教师合作研究制定。将课程大纲改成课程标准，能够更加准确的说明课程的任务、完成每个网页项目后学生应该达到的职业标准和职业能力，而不是知识点的罗列，应该是技能和素质的要求，明确教师和合作企业的任务，合理统筹安排课堂内容和企业实践要求，明确什么时间企业人员参与，明确什么时间实训设计，明确课程的课时标准，明确课程完成后学生所掌握的技术方法。

（三）教材建设

课程教材需要随着网页设计技术的发展而更新，在教材建设中，校企合作编写符合“做中学”和CDIO模式的课程教材，注重实践动手能力的培养、注重分析问题解决问题能力的培养以及网页设计岗位能力、素质和行业规范的培养。从合作企业选取实际典型的网页设计任务，经过重组编排后形成教材内容，在每个项目的制作中讲解使用的技术、技巧和标准，并且每个项目任务要按照CDIO的思想，按网页项目的开发周期进行编写，按照构思、设计、实现和运行测试的顺序进行，每两年对教材进行重新编写或修订工作。

（四）辅助教学资源建设

网页设计的技巧范文第4篇

关键词：网页；色调；技巧

中图分类号：TP37 文献标识码：A文章编号：1007-9599 (2011) 07-0000-01

The Use Sills of Pages Color

Lin Wenfa

(Wuhan University of Technology,School of Art and Design,Wuhan430000,China)

Abstract:Web design for establishing the image of a page of particular importance,the paper's tone for the classified pages,and color for web page design skills are described,want to give web design provide reference to further promote the web designers Inspiration.

Keywords:Web;Color;Skills

21世纪，互联网与人类社会的联系日益密切，互联网正在世界范围内引起一场全新的技术革命。网页成为视觉传达的一种新的载体，有着比杂志、报刊、电视、广播等传统媒体更为多的组成要素，如图形、文字、图像、声音、视频、动画等、这些要素都成为网页设计师的考虑要素[1]。网页设计是艺术与技术的结合，它结合了众多学科领域的知识点。在网页的配色方面，设计者不管使用简单的颜色还是丰富的颜色，都必须要把各个颜色的特性发挥到极致。色调是艺术的重要表现要素，它的视觉效果十分引人注目，它凭借不可抗拒的魅力使原本平淡无奇的东西，转瞬变得生动起来，为网页设计作品注入了鲜活的生命力。具相关的研究资料阐述，在网页设计中，色调能提高信息分类和浏览的准确度和速度，能提高理解力，比字体和文字变化更能加强理解的准确度，而处理得当的色调在网页设计中更能体现网站的风格，使浏览者留下深刻的印象并可以提高访问率从而加强网站的知名度[2]。

一、网页色调的含义以及分类标准

（一）网页色调的基本概念。我们所见的各种色调都是由三种颜色或三种色光组成，他们自身不能再拆分出其他的颜色成份，因此被称作三原色。原色分为两种类型：色料三原色和色光三原色。原色可以合成其他色，但是其他色却不能还原出来原色。光学三原色是指绿（Green）、红（Red）、蓝（Blue）这三种颜色，将这三种色光混合，可以得出白色光。色彩可以分为非彩色和有彩色两种。非彩色只有明度的性质，而有彩色才同时具有明度、色相和彩度的三要素。明度、色相、彩度这三种性质构成色彩的最基本要素，人们以此来分析、鉴别以及描述色彩，称作色彩的三要素，其中色相（Hue）简写H，是色彩的第一要素，表示色的特质。

（二）网页色调划分的标准。对网页色调定位的研究仍然是很多学者探讨的问题。网页色调分类理论的意义：一是能够为网页设计中色调的定位提供设计思路。依据各自特有的“限制因素”从而来定位色调，就像人们依据各自的身体特征即“自然色素”。运用自己的色彩群，在一定程度上可以提高设计效率，节约设计时间，减少浪费，所以具有普遍意义；二是通过一系列类型不同网站的色调分类，有利于规范化管理网页色调，对色调管理的发展有着十分重要的意义[3]。目前网页最普遍的分类标准是：热烈奔放型、轻松活泼型、神秘另类型、知性沉稳型、明亮轻快型、简约理性型、专业高效型和甜美柔媚型这类型。经过大量的检索与实践，可分别归纳得出各类型的网页色调配色参考系数，从而创建出一个网页色调定位的参考数据库。

二、网页色调运用的技巧基本原则

（一）网页色调需要与网站主题相一致。不同的色彩代表着不同意义，而且对人们的心理感应也有所不同。所以网站在选择色彩时，需要充分的考虑人们的心理感受及色彩的象征意义。比如，绿色象征着生命和希望，给予人们安全、健康的感觉，较适宜作健康类网页的主色调；政府等一些相关部门的网页风格应表现出其庄重感，呈现严肃、宁静、典雅的氛围，一般采用冷色调；然而电子商务此类网页往往通过橙色、红色、黄色等一些暖色调进行搭配，呈现和煦、温馨、热情的氛围；如果健康类的网站大面积地采用刺激的人橙、红和黄，就会易造成人们心理上的恐惧感和紧张感，然后蓝色的色调代表着广阔，给人们的心理印象是广大、深远而睿智，为广大科技企业所钟爱。

（二）简洁是网页色调设计的永恒原则。色调中分为有无彩色和彩色。白、黑、灰是无彩色，而其它的颜色都属于有彩色。在网页配色过程中，不能将所有的颜色都用到。在无彩色之外，尽量把颜色控制在二种有色彩以内。然而这里有一个误区，就是很多网页设计者在计算颜色的时把黑色（及灰色、白色）也也算入有彩色之中。所以注意，这里所指的颜色是指有彩色。我们通常所说的黄、红、紫、蓝等每一个字都可以代表一类的颜色，通常称之为色相。其是指色调的相貌，也是区别于有色彩的名称。也有一部分网页设计者认为浅红色和深红色是两种色相，其实它们仅是一种色相―红都是以“红”基础，然后加入灰色不同，调整它们的亮度，或者调节饱和度。这些在Photoshop的调色板中很容易地调出来。简洁应该是网页色彩设计的永恒的原则，这个原则不应该因为时间的推移从而失去意义。

（三）需要确定网页的主色调。网页色调设计首先需要明确画面的主要色调倾向，即主色调。主色调就像音乐中的主旋律一样，在整个网页中起着主导作用，页面上的其它色调全是围绕着蓝色来搭配的。采用高饱和度的色调，如绿色、蓝色能营造出智慧、稳重、希望的氛围，使视觉吸引力为强烈；采用饱和度和中、低明度的复合色，如蓝灰、浅灰、枣红、暗绿，可传达优雅、严肃、富有内涵、稳重的氛围；以柔和色调如粉彩等为主色调的网页，可传达愉悦、轻松、明朗的气氛。在选择主色调时，首先要明确网站的主题、想要传达的信息和服务对象，以及利用色调想要达到的心理和视觉效果[4]。在网页中辅助色所占的比例并不大，但却在整个页面的色调上起着调和的作用。它能让页面更活泼且富有生气，并使得主色调更为流畅地贯穿整体。辅助色可以使用主色调的对比色，也可以用与主色调相近的颜色。

三、结束语

综上所述，色调是网页设计中一个重要环节。随着互联网的进一步普及，网页设计会越来越重视网页中色彩的运用，使得网页更美感，同时吸引广大的网页制作者关注对于网页色调的研究，也不断的引导人们提高审美观，从而使得网页制作者制作出更美观的网页。

参考文献：

[1]张梅,梁军,卢岩.新设计色彩[M].化学工业出版社,2005

[2]张缨.中国传统色彩的美学探源[J].四川教育学院学报,2005,5:23-24

网页设计的技巧范文第5篇

1两个关键概念：响应式网页设计与原型

响应式网页设计（RWD，Responsive网页Design）是一种网页前端开发技术，它可以描述为，“兼顾多种不同设备屏幕尺寸、分辨率、系统平台和行为做出相应的调整和布局的显示机制”。原型（Prototype），也叫“原样”，是“模拟科学”中的一个术语。在心理科学中，由于很难对动作或心智活动认识清楚，所以一般沿用J•R•安德森的观点，把原型（Prototype）视为关于范畴的最典型的样例设想，即把“原型”视为外化的实践模式，或“物质化”了的心智活动方式或操作活动程序。综合上述，响应式网页设计原型可描述为：符合“响应式网页设计项目分析、各类终端具有适合自身用户体验的不同页面效果、一套代码完成所有不同终端的网页制作、各类终端与主流浏览器良好兼容”等一系列规则的，外化的响应式网页设计活动实践模式。

2建构响应式网页设计的原型

建构原型一般采用心理模拟法，它包含三个步骤：

（1）响应式网页设计活动的功能分析；

（2）响应式网页设计活动的结构分析；

（3）功能分析与结构分析的有机结合。其中，功能分析的重点是作用的对象，条件与结果；结构分析的重点在于组成要素及要素之间的关系。响应式网页设计的目标是能够高效的编写一套代码为各类终端设备提供良好的设计效果和使用体验，这需要具备HTML5、CSS3、Javascript和jquery的基本技能。响应式网页设计之父——伊桑.马科特认为，响应式网页设计应该首先针对小屏幕进行设计，然后逐步增强针对大屏幕设计。这种思路颠覆了传统固定宽度的网页设计方法，对于那些已经积攒了零散的响应式网页设计开发技巧、HTML5及CSS3等技术，能够较熟练的完成固定宽度桌面端网页的新手而言，恐怕很难理解从小屏幕开始设计然后渐进增强的思路。考虑到新手已经习惯设计制作固定宽度的桌面版网页，响应式网页设计如果从固定宽度的大屏幕网页制作开始，然后改造这套代码将仅适用于桌面的网页依次兼容平板端和手机端也是一个不错的思路。响应式网页设计活动包含了“项目分析”、“网页平面设计”、“桌面版网页制作”、“平面版的改造”、“手机版的改造”及“兼容问题的调试”这6个典型的子活动。这些典型要素的关系可以描述为，“要想高效的完成某响应式网页设计项目，首先需要项目分析，其阶段性结果是响应式网页的总体方案，即在用户群体需求分析及主题解读的基础上，进行色彩分析及定位，确定UI版面布局，分析设计网页功能模块，确定网页风格等，最终形成包含“前言”、“需求分析”、“系统分析”、“风格设计”、“各类终端UI版面初步布局”、“色彩定位”、“网页建设日程规划”等部分的网页总体方案文档；然后，根据前期方案中“色彩”、“风格”及“各类终端UI版面布局”等的分析，依据页面设计原则，利用photoshop绘制适用于各类终端显示的平面效果图；随后，利用“HTML5+Css3”技术采用<div>+css布局完成固定宽度桌面版网页的制作并生成网页文件和样式表文件；接着，在这套代码的基础上，利用媒体查询技术、流式布局、弹性图片技术，结合平板终端的页面效果图将代码改造成兼容桌面及平板的网页；之后，在上述修改的基础上，继续利用媒体查询技术和弹性图片技术，结合手机终端的页面效果图将代码改造成兼容桌面、平板、手机的网页；最后，利用火狐和IETester软件查看初步完成的响应式网页，解决跨浏览器的兼容问题，形成完整网站。该过程中任何环节如果出现不妥当都应该返回上个步骤进行重新修改。结合上述对网页设计活动的功能与结构分析，不难发现，响应式Web设计活动原型中的6个典型子活动复杂程度不同。其中“桌面版网页制作”、“平面版的改造”、“手机版的改造”及“兼容问题的调试”这4个典型子活动是比较复杂的，包含了很多熟手的关键技术，需要进一步阐述。

3熟手的关键技术

从上述适用于新手的响应式网页设计活动基本原型发现，制作一个能够兼容主流浏览器的固定宽度桌面版网页是响应式网页制作的开端。那么，首先在“桌面版网页制作”这个环节中提取一些熟手关键技术，作为给予新手的技巧提示。

3.1兼容主流浏览器的桌面版网页制作技术

为了防止不同浏览器给予相同HTML5标签的初始样式存在差异，熟手利用HTML5+CSS3制作桌面版网页制作时，一般会在样式文件（扩展名.css）中给出如下初始化代码：*{margin：0px;padding:0px;}body{margin:0px;padding:0px;text-align:center;font-family:"宋体";font-size:16px;color:#cccccc;}ul,li,a{margin:0px;padding:0px;list-style:none;}div{overflow:hidden;float:left;}#wrapper{width:1007px;height:auto;margin-left:auto;margin-right:auto;overflow:hidden;clear:both;}这部分代码块可以实现页面在IE内核和Firefox内核的所有版本浏览器中居中对齐，外层布局盒子与浏览器头部无缝紧贴；<div>及css3完成固定宽度布局时，默认所有内部布局<div>向左浮动，溢出属性为隐藏；所有构成页面的HTML5元素的默认边距和填充属性为0px；HTML5的列表标签默认项目符号为空，边距和填充为0px。此外，确定页面尺寸,目前大多数显示器为1024像素*768像素，那么以此为默认显示器时，页面的宽度尺寸一般设置为“1007像素”。初始化CSS代码后，接下来就是利用<div>+CSS完成布局，这里提示新手：完成布局后，务必在IETESTER和Firefox中检查网页布局是否能够兼容主流浏览器。然后，根据桌面版网页平面设计效果图完成页面的制作。此外，熟手的经验是制作过程中频繁检测桌面版网页是否能够完美兼容各种浏览器。

3.2利用流式布局、弹性图片、媒体查询技术修改桌面版网页

（1）相对视口尺寸，将最外层的布局<div>（例如：#wrapper{width:1007px;...}）的宽度设置为96%（这个值取决于当前页面的视觉效果，也可以给其他数值）；然后，将最外层的布局<div>内部的页头布局<div>、导航布局<div>、内容布局<div>、侧边栏布局<div>、页脚布局<div>对应的CSS样式中的width属性值利用公式——目标元素宽度÷上下文元素宽度=百分比宽度把网页的固定布局修改成百分比布局，也就是将固定像素宽度转换成对应的百分比宽度。

（2）将页面中所有HTML5标签元素对应的CSS样式表中的margin-right、margin-left、padding-right、padding-left的属性值也用公式——目标元素宽度÷上下文元素宽度=百分比宽度来修改。

（3）将CSS样式表中的font-size属性值的单位用em来代替px。这里依然使用公式——目标元素宽度÷上下文元素宽度=百分比宽度。这里需要提示新手的是：在<body>标签的初始化代码中，如果有font-size:16px；语句，那么在给其他元素的font-size属性上修改值时，公式中的“上下文元素宽度”就等于16px，例如，#logo{font-size:48px；}现在要修改为#logo{font-size:3em；}。

（4）为了实现弹性图片，让图片随视口缩放，图形图像、动画和视频的弹性设置使用“img,object,video,embed{width:100%;max-width:100%;}”。其中，max-width属性是用于确保缩放时不会超出图片最大尺寸。同时，熟手还会使用AdaptiveImages解决方案来实现自适应图片。

（5）媒体查询可以通过判断不同设备终端，提供不同的样式使其实现在不同终端都能获得最佳的用户体验。例如，某个响应式页面用电脑浏览页面时，页面信息会以平铺的形式分布在页面合适的位置；用手机浏览页面时，导航按钮会相继隐藏起来，部分信息变成左右滑动的方式呈现，页面会重新布局，图片相应缩小。媒介查询的语法格式是，例如：设定宽度不超过400像素的屏幕尺寸，代码是：<linkhref="css/phone.css"rel="stylesheet"type="text/css"media="onlyscreenand(max-width:400px)">。虽然，HTML5+CSS3提供了良好的媒体查询功能，但当前仍有一些浏览器不支持，你可能需要添加如下基本样式：<!--[ifltIE9&!IEMobile]><linkhref="iestyles.css"rel="stylesheet"type="text/css"><![endif]-->3.3不同种类、不同版本浏览器的兼容问题解决跨越浏览器的问题一直是响应式网页设计的难题。熟手面对这一问题时，一般采用“渐进增强与降级”、“利用javascript修复老版本IE”、“使用Modernizr辅助修正样式，按需加载资源”、“给IE6，7，8追加媒体查询功能”等方法。

4结束语