分类“你问我答”的存档

«上一页 | 共 9 页: « 1 2 [3] 4 5 6 7 8 » ... 末页 | 下一页»

你问我答(28)——关于网页设计软件对CSS支持的比较

2008年04月09日 星期三

收到了wyysf123和“ 蓝色的风”等几位读者关于软件的选择问题，核心在于设计基于CSS布局页面的时候，Dreamweaver和Expression Web哪个软件更好用？因此在这里谈几点个人的体会。

1.可视化方式并不高效

网页制作本质上就是写编写代码，因此实际上任何文本编辑器都可以编写，我们这里谈的是“可视化”的网页编辑软件。但实际上使用纯文本编辑进行设计和开发工作的人是很多的，尤其是一些“高手”。实际上必须承认，鼠标和对话框对于很多软件，就是给初学者用的东西，使用同一个软件，如果键盘用得好，工作效率能高很多。我个人就接触过一些非常鄙视用鼠标的高手，键盘使用的炉火纯青，工作效率确实高很多。

2.可视化软件曾经很重要

网页制作这项工作出现的时间还并不长，因此存在大量的入门选手，使用可视化的方式更适合入门，因此有很大的市场需求。此外，一个重要原因是以前大都使用表格布局，给设计师提供了不用理解代码，直接在软件中拖拽就可以制作网页的可能，因此Dreamweaver软件就得到了极大的普及。就好像如果我们都要先学会无线电原理才能看电视，那么电视机就不会像现在这样普及了。

3.CSS的出现改变了现状

然而CSS布局方式出现以后，情况又有所变化了，软件能给设计提供的辅助支持实际上大大降低了，尽管软件中有CSS设置的面板，可以在里面选择并输入CSS的属性值，但是如果你不理解这些属性的含义和作用，这些都没有意义。问题的另一个方面是，如果你真的已经都理解了这些属性的原理，你会发现，用那些属性面板来设置，实在是多此一举，直接输入代码既方便，又快捷。这就好像在小孩刚开始学数数的时候，大人都告诉他用手指头帮着数，然而等长大了之后，谁还会用手指头来数数呢？这和表格布局是很不一样的，因为一个复杂的布局表格，要计算出表格HTML代码，是很花时间的，而软件可以生成出非常精确的代码，因此软件的作用就很大了，但是CSS完全不是这样的。

4.可视化软件的作用

那么这些软件就完全没有用处了吗？当然不是，在我看来还是有两个主要的作用。一个是在输入代码的时候的代码提示功能，和错误提示。也就是说，你输入一个属性的名称的第一个字母，就会列出可能的属性，这样选一个即可，一来避免拼写错，二来可以提高效率，此外还可以对你拼写错误给出提示，这都是很有用的功能。第二个是尽管预览试图钟的效果和实际浏览器中的效果有一定的差距，但是毕竟还是有些提示作用。

5.如何看待可视化软件

因此对待可视化的软件，主要是Dreamweaver 和 Expression Web，别太依靠它，关键还是要自己把CSS彻底搞明白，然后根据自己的习惯，看看他们能在那些方面对你有所帮助，你就可以用它来提高工作效率了。

6.长远看可视化软件应该如何支持CSS

读者问到哪个软件对CSS支持的好，这个问题要看你问的是怎么支持？支持应该有三个层次：

1：代码视图的支持，即支持编写CSS代码，这个基本上任何文本编辑软件都支持，只是哪个软件更方便好用一些，这个基本上已经都做到了。

2：设计试图的支持，完善的可视化预览，我觉得比较理想的应该是可以精确地模拟若干种主流浏览器，比如写了一个页面，在设计视图，用户可以选择按照IE 6显示，IE 7显示，还是按照Firefox显示等等，当然这个是很难做到的，毕竟浏览器种类很多，而且都不是Adobe公司开发的，不过在这一点上，我觉得Expression Web会比较有优势，毕竟IE就是微软自家的产品，里面的细节一清二楚，保证在设计视图逼真模拟IE 浏览器应该是可以做到的。

3：自动生成的支持，这个就是更高层次的支持了，也就是用户设定若干条件后，自动生成精确的、正确的、有效的、符合逻辑的CSS代码，就像Fireworks自动生成表格代码一样，如果这个实现了，那么对设计师来说就太方便了，又回到不需要懂得原理就可以制作的年代，不过另一方面是这个工作的价值就会大大降低了。不过目前这个层次的支持，大概还是可望不可及的。

7.可视化软件的比较

至于Dreamweaver和Expression Web中，哪个更好用，我个人的使用感觉，差别不很明显。设置CSS的面板和对话框这些功能我个人基本上都不用。对于代码提示功能，我感觉Expression Web更好一些，作的更完善一些，另外Dreamweaver的代码提示经常弹不出来，不知是什么原因，而Expression Web只要该出来的时候一定会弹出来。关于在设计视图中的预览效果，我这贴出两个图，大家可以看一下大致上的效果，我感觉如果你的网页比较“规矩”，效果还可以接受。

第一张是在浏览器中的最终效果，第二张是在Expression Web中的效果，第三章是在Dreamweaver中的效果。

浏览器中的效果

浏览器中的效果

Expression Web 中的效果

Expression Web 中的效果

Dreamweaver 中的效果

Dreamweaver 中的效果

总体来说，Expression Web渲染出来的页面更好看一些，margin和padding都有用不同颜色和方向的斜线表示出来，在Dreamweaver中只有轮廓线，margin和padding在某个元素被选中以后，会显示出来。

总体来说，如果给Expression打8分的话，Dreamweaver可以打6分吧。

发表在你问我答 | 温谦 | 10 条评论 »

你问我答(27)——使用CSS定位页面的“footer”

2008年03月28日 星期五

colorandy读者提出这样一个关于页面布局的问题：

“如果有一个footer层，我想让他固定出现在整个页面的最下方，不随着页面中的内容而变化，CSS中要怎样设？比如里面是一些版权信息。因为我整页的内容比较少，footer老跟着内容跑到上面去，很不美观。”

这个问题如果在以前使用表格布局，并不困难，只要给页面的最外层表格高度设置为100%就可以了，然而，在Web标准的规范中，表格的高度已经属于废止的属性，应该避免使用，而且使用Web标准以后，也不在提倡使用表格布局了，那么是否有办法使用CSS来实现页面的页脚部分固定在浏览器底端呢？

下面就来讲解它的实现方法。

基本思路

首先考虑外层设置一个容器div，id设为#container，使他的高度为浏览器窗口的高度，然后将#footer这个div设置为#container的子div，并使用绝对定位的方式，使他固定到#container的底端，以实现希望的效果。

点击这里察看案例页面效果。 改变浏览器的高度和宽度，可以看到Footer部分的效果。

代码实现

下面先考虑HTML结构，这个演示页面的HTML代码非常简单。

1
2
3
4
5
6
7
8
9
10
11
12

<body>
	<div id="container">
		<div id="content">
			<h1>Content</h1>
			<p>请改变浏览器窗口的高度，以观察footer效果。</p>
			<p>这里是示例文字，………，这里是示例文字。</p>
		</div>
		<div id="footer">
			<h1>Footer</h1>
		</div>
	</div>
</body>

然后设置CSS，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

	body,html {
		margin: 0;
		padding: 0;
		font: 12px/1.5 arial;
		height:100%;
	}
	#container {
		min-height:100%;
		position: relative;
	}
	#content {
		padding: 10px;
		padding-bottom: 60px;  
		/* 20px(font-size)x2(line-height) + 10px(padding)x2=60px*/
	}
	#footer {
		position: absolute;
		bottom: 0;
		padding: 10px 0;
		background-color: #AAA;
		width: 100%;
	}
	#footer h1 {
		font: 20px/2 Arial;
		margin:0;
		padding:0 10px;
	}

要点分析

1：首先要给html和body元素设置高度（height属性）为100% （第5行），这样先保证根元素的高度撑满整个浏览器窗口，然后下面才能使#container的高度撑满整个浏览器窗口。

至于为什么用同时设置html和body元素，是因为Firefox和IE认为的根元素不一样，因此这里都给他们设置上。

2：然后把#container的高度也设置为100% （第8行），但是要注意，这里使用了“min-height”属性，而不是普通的height属性，这是因为我们要考虑到，如果#content中的内容如果增加了，他的高度超过了浏览器窗口的高度，那么如果把#container的高度仍然是100%，就会导致#footer仍然定位在浏器窗口的下端，从而遮盖了#content中的内容。

而使用min-height属性的作用就是使#container的高度“至少”为浏览器窗口的高度，而当如果它里面的内容增加了，他的高度会也跟随着增加，这才是我们需要的效果。

但是需要说明的是，在Firefox和IE7中，支持min-height属性，而IE6种，并不支持min-height属性，但是“歪打正着”的是，IE 6中，会把min-height属性解释为height属性，但是IE 6中height属性的效果却是min-height本来应该具有的效果，也就是说，在IE 6中，子div的高度会撑大父div的高度。所以这样正好可以实现在IE6、IE7和Firefox中都可以正确实现我们希望的效果了。

3：接下来，将#container设置为相对定位（第9行），目的是使他成为它里面的#footer的定位基准，也就是所谓的“最近的定位过的祖先元素”。

4：然后把#foooter设置为绝对定位（第17行），并使之贴在#container的最下端（第18行）。

5：但是要注意，如果当我们把#foooter贴在#container的最下端以后，他实际上已经和上面的#content这个div重叠了，为了避免覆盖#content中的内容，我们在#contetn中设置了下侧的padding，使padding-bottom的值等于#footer的高度（第13行），就可以保证避免覆盖#content的文字了，这个高度的计算注意代码中的注释中给出的计算方法（第14行）。

6：剩下的就没有更多技术需要解释了。如果读者对上面的解释还不十分理解，说明您对CSS的基本概念还了解得不够，先仔细把CSS的核心原理和基本概念彻底搞清楚，再来看这些代码就是很轻松的了。

点击这里察看案例页面效果。

案例总结

这个看起来并不复杂的代码，去包含了很多CSS的核心概念和原理，因此这里又回到了我们曾经多次给读者的建议上：一定要扎扎实实把CSS的核心原理搞清楚，特别是CSS的4大核心基石：盒子模型、标准流、浮动、定位。只有把这些核心基础掌握到烂熟于胸的程度，才能游刃有余地进行设计。

发表在你问我答 | 温谦 | 21 条评论 »

你问我答(26)——遵循Web标准的网页设计工作流程(五)

2008年03月24日 星期一

昨天介绍了布局设计和视觉细节设计这两个步骤，今天进行下一步工作，也是这个系列的最后一次内容了。

接下来我们进行一些交互性的动态设计，这里主要是为网页元素增加鼠标经过时的效果。如下图所示，在鼠标指针经过主导航栏和次导航栏的时候，相应的菜单项会发生变化，鼠标经过“登录帐号”或者“购物车”图像时，颜色也会变浅，这都是为了提示用户所进行的选择。此外，当鼠标经过图像时，图像周围的边框也会发变化。

网页设计流程-交互

到这里，这个页面的静态设计就算完成了，接下来还需要进行相应程序的开发，无论是由程序员进行开发，还是使用CMS系统，都应该相关的开发人员来继续工作了，设计师的工作到这里基本就结束了。

希望读者可以通过5天来的讲解，对网页设计从无到有，从策划构思到设计实施，有一个比较完整的概念了！

最后，谈一谈使用这种方法设计出来页面具有哪些优点。做到这里，读者可能还没有完全意识到使用这种CSS进行布局的优点。这种布局方式的最大优点是非常灵活，可以方便地扩展和调整。例如，当网站随着业务的发展，需要在页面中增加一些内容，那么不需要修改CSS样式，只需要简单地在HTML中增加相应的模块就可以了。

如下图所示的就是对页面扩展了内容以后的效果，在“主要内容”部分，增加了“特色促销”和“优中选优”两个模块，再右侧栏中增加了“送货服务”和“热门信息”两个模块，在前面的页面基础上，增加这些内容之需要几分钟的时间就可以完成。

网页设计流程-增加模块

不但如此，充分设计合理的页面，可以非常灵活地修改样式，例如，只需要将两列布局的浮动方向交换，就可以立即得到一个新的页面，如下图所示，可以看到，左右两列交换了位置。

网页设计流程-交换顺序

试想如果没有从一开始就有良好的结构设计，那么稍微修改一下内容都是非常复杂的事情。如果读者曾经使用表格进行页面布局，就会发现这里列出的优点了，对于表格布局的网页，这些都是不可想象的。

好了，5天的讲解到这这里就全部完成了，希望通过以上的介绍，能够给读者在设计思路上有一些帮助！

发表在你问我答 | 温谦 | 16 条评论 »

你问我答(25)——遵循Web标准的网页设计工作流程(四)

2008年03月23日 星期日

昨天介绍了原型原型设计和网页方案设计这两个步骤，今天进行下一步工作。

下面应该进行的步骤是页面布局这一步骤，任务是把各种元素放到适当的位置，暂时不用涉及非常细节的因素。

具体来说，首先应该对页面的整体进行一些设置，把个各种浏览器中默认值不同的元素属性都设置为统一的值等等，以保证这些内容在各个浏览器中有相同表现。

接下来就依次对网页的各个部分进行布局设置，入页头、中间部分、页脚等等，此时的主要任务是把位置定好，例如下图中，可以看到，网页中间的内容已经实现了两列布局的效果，而具体的样式细节还没有设置。

网页设计流程-布局

在各个部分布局完成以后，就开始对每个部分依次设置视觉细节效果，例如在页面的页头部分，就可以如图下所示地在Fireworks中进行切片，把需要的图像切出来。

网页设计流程-切片

在例如，在网页右侧的圆角框，也是在这一步中实现的，如下图所示。

网页设计流程-圆角

此外还有很多细节都需要仔细设置，例如圆角框中的目录列表、搜索表单等等，这些设置就都是只涉及局部的样式了。从图中可以看到，到这里已经接近胜利了。

好了今天介绍到了这里，明天继续！

发表在你问我答 | 温谦 | 9 条评论 »

你问我答(24)——遵循Web标准的网页设计工作流程(三)

2008年03月22日 星期六

昨天介绍了搭建网页的HTML结构，今天进行下一步工作。

在设计任何一个网页之前，都应该先有一个构思的过程，对网站的完整功能和内容作一个全面的分析。如果有条件，应该制作出线框图，这个过程专业上称为“原型设计”，例如，在具体制作页面之前，我们就可以先设计一个如下图所示的网页原型线框图。

网页设计流程-原型

网页原型设计也是分步骤实现的，先把一个页面分为若干个大部分，然后分别逐步细化。

如果是为客户设计的网页，那么使用原型线框图与客户交流沟通是最合适的方式，既可以清晰地表明设计思路，又不用花费大量的绘制时间，因为原型设计阶段，往往要经过反复修改，如果每次都使用完成以后的设计图交流，则反复修改需要大量的时间和工作量，而且在设计的开始阶段，往往交流沟通的中心并不是涉及的细节，而是功能、结构等策略性的问题，因此使用这种线框图示非常合适的。

这里向读者推荐一种绘制圆形线框图非常方便的软件——“Axure RP”，这个软件是专门用来作原型设计的，而且可以方便地设计动态过程的原型，读者有兴趣可以实践一下。这个软件的网址是：http://www.axure.com/。这个软件目前没有中文版。

如果没有Axure RP这样的软件，普通的绘图软件，例如微软公司的Visio，Adobe公司的Fireworks、甚至Photoshop等软件，都可以胜任。

在与客户讨论，确定了原型以后，可以进行实际的页面方案设计了，这一步通常使用Photoshop或者Fireworks等软件完成。如下图所示的是在Fireworks中的效果。

网页设计流程-fireworks

好了，今天就介绍到这里，明天继续！

发表在你问我答 | 温谦 | 3 条评论 »

«上一页 | 共 9 页: « 1 2 [3] 4 5 6 7 8 » ... 末页 | 下一页»