分类“你问我答”的存档

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

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

2008年03月21日 星期五

昨天介绍了网页设计的工作流程概述，今天开始来看一看具体是如何进行的。

第1步要先想清楚这个网站的内容是什么？通过一个网页要传达给访问者什么信息？这些信息中哪些是最重要的？哪些是相对比较重要的？以及哪些是次要的。这些信息应该如何组织呢？ 我们可以参考一些网上商店的网站，比如下图所示的是卓越沿马逊网上商店的首页，读者在研究一些成功网站的时候，不要仅仅关注这些网站的设计风格和技术细节，更要从更深的角度观察它们，这样才能更好地掌握核心的东西。例如从图中可以看到，这个页面尽管内容非常多，但简单来说，就分为两大类——“分类链接”和“推荐商品链接”。

网页设计流程-卓越

这样回到我们自己的网站，比如说，可以确定出需要在首页展示如下一些信息：

  • 网站标题
  • 网站标志
  • 主导航栏
  • 自身介绍和用户帮助的链接
  • 账号登录与购物车
  • 今日推荐商品（1种）
  • 最受欢迎商品（1种）
  • 分类推荐商品（3种）
  • 搜索框
  • 类别菜单
  • 特别提示信息
  • 版权信息

在理解了网站的基础上，我们开始构建网站的内容结构。现在完全不要管CSS，而是完全从网页的内容出发，根据上面列出的要点，通过HTML搭建出网页的内容结构。

如下图所示的是搭建的HTML在没有使用任何CSS设置的情况下，使用浏览器观察的效果。在图中，左侧使用线条表示了各个项目的构成。实际上图中显示的就是前面的图在不使用任何CSS样式时的表现。

网页设计流程-html

提示读者一点，任何一个页面，应该进可能保证在不使用CSS的情况下，依然保持良好结构和可读性。这不仅仅对访问者很有帮助，而且可以有助于你的网站被Google、百度这样的搜索引擎了解和收录，这样对于网站提升访问量可是至关重要的。

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

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

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

2008年03月20日 星期四

经常有读者来信询问在实际开发一个网站的时候，具体是按照什么工作流程进行工作的，一个网站到底是如何从零开始一点点做出来的呢?

今天我们来就这个问题作一些说明。我们今天介绍的是关于从零开始设计一个页面的过程，我们可以把一个页面的完整设计过程分为7个步骤，如下图所示。

网页设计流程

在图中，这个过程分为了7个步骤，并且说明了这7个步骤相应使用的工具。这7个步骤依次为：

1. 内容分析：仔细研究需要在网页中的展现的内容，梳理其中的逻辑关系，分清层次，以及重要程度。

2. 结构设计：根据内容分析的成果，搭建出合理的HTML结构，保证在没有任何CSS样式的情况下，在浏览器保持高可读性。

3. 原型设计：根据网页的结构，绘制出原型线框图，对页面进行合理的分区的布局，原型线框图是设计负责人与客户交流的最佳媒介。

4. 方案设计：在确定的原型线框图基础上，使用美工软件，设计出具有良好视觉效果的页面设计方法。

5. 布局设计：使用HTML和CSS对页面进行布局。

6. 视觉设计：使用CSS并配合美工设计元素，完成由设计方法到网页的转化。

7. 交互设计：为网页增添交互效果，如鼠标指针经过时的一些特效等。

下面具体解说一下，例如要设计出一个如下图所示的页面。这是为一个假想的名为“Baby Housing”的儿童用品网上商店制作的一个网站首页。

网页设计流程-首页

请读者思考一下要设计出这样的一个页面，根据上面描述的工作流程，应该在每一步骤中完成什么工作呢？今天介绍先介绍这里，明天继续！

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

你问我答(21)——破解Kai Laborenz的神秘海底世界

2008年03月14日 星期五

在《CSS设计彻底研究》书的第45页，展示了一个CSS禅意花园的作品，德国设计师Kai Laborenz创作，名称是“海底世界”。我们在书中谈到，这个作品可以称得上所有禅意花园作品中最神奇的一个，大家首先可以仔细看一下这个网页的效果，但是要注意只有Firefox浏览器中才会有完美的表现。有几位读者来信询问这个效果是如何实现的，本文就来做一个解答。

如果读者对“禅意花园”还不清楚，请观看关于禅意花园的视频介绍。

这个页面中表现了一个精致的海底世界，页面很长，浏览器窗口中只能显示很小的一部分。无论如何拖动浏览器的滚动条，页面中的“潜水员”都会在相同的地方，也就是说“潜水员”会在“海水中”上浮或下潜。页面上部的背景比较浅，这意味着在海面附近，越往下“海洋”的背景颜色就会越深，意味着潜水员在不断地下潜。最神奇的是，“潜水员”手中的探照灯竟然可以随着下潜的深度不断变亮。

需要注意，这个网页在FireFox中的效果最好，在IE中虽然可以看出探照灯光的变化，但是由于这个页面使用了特殊技术，背景颜色显示不如在FireFox中自然。在IE 6中，没有任何效果。

那么读者有没有考虑过这个效果完全依靠CSS是如何实现的呢？我在这里给出了一个简化的版本，读者可以看拖动滚动条，看到探照灯的亮度会逐渐发生变化。请使用Firefox或者IE 7浏览器查看，IE 6中没有效果。读者可以先不要看下面结的讲解，想一想能不能自己找到办法实现这个效果。

这个效果是如何产生的呢？请看下图的说明，一共有4层，底层是body元素，上面有三层分别用div定义，id依次次为light、alpha和person。

HTML如下定义：

1
2
3
4
5

<body>
	<div id="light" ><img src="light.png"/></div>
	<div id="person" ><img src="person.png"/></div>
	<div id="alpha"><img src="alpha.png"/></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

body{
	background:url('bg.gif');
	height:1100px;
	margin:0px;
}
 
#light{
	position:fixed;
	top:20px;
	left:150px; 
	z-index:10;
}
 
#alpha{
	position:absolute;
	top:0px;
	left:150px;
	z-index:20;
}
 
#person{
	position:fixed;
	top:20px;
	left:150px;
	z-index:30;
}

可以看到#light和#person使用固定（fixed）定位方式，因此在拖动滚动条的时候，它们相对于浏览器窗口位置保持不变，通过z-index属性可以保证这3个div的上下顺序：

#person中放置潜水员的图像，在最上面，因此它总是可见的；

#alpha处于上数第2层，它的图像是一个透明度变化的div，从完全不透逐渐过渡为完全透明；

#light中放置的探照灯的图像，他在#alpha的下面，因此当它处于不透明部分时，就不可见了，而随着滚动条的运动，当他逐渐到透明的部分时，探照灯就逐渐变亮了。

因此这里一共需要用到4个图像，点击可以查看：body的背景图像、灯光图像(白色背景中看不清，下载后到软件中查看)、半透明图像和潜水员图像。

到这里看起来原理并不复杂，问题似乎已经搞清楚了，实际并没有。读者有没有考虑过，“body的背景图像”和“半透明图像”这两个图像不是普通的两个图像，他们有着特殊的要求。因为要看起来二者融合在在一起，看不出边界的存在。旁边两个图中，左图是在Fireworks中观察“半透明图像”的效果，可以看到是一个从深蓝到完全透明的过渡；而当把背景图像放置到他的下面的时候，可以看到二者完全融合起来，看不出任何边界，如右图所示，注意图中的浅蓝色细线是Fireworks软件表示选中对象的线。

因此，如果你来自己做一个背景图像和半透明透明图像的时候，一定要保证重叠的时候二者可以完全融合。如何实现这个要求呢？在制作的时候，首先确定背景图像的渐变色，然后先使上面的半透明图像使用和背景完全一样渐变颜色填充方式进行填充，这样保证二者是可以完全融合的（即看不出二者之间的边界），然后再设置为从完全不透明到完全透明，这样就可以制作出这个“半透明图像”了。这样，在这二者之间插入一个中间层，该层中的对象处于不同位置，被遮盖的程度就会不同（如探照灯的光亮程度），就会显示出不同的效果了。按照这个顺序就可以制作任意颜色的这种效果。读者可以充分发挥想像力，利用这种原理，做出各种不同的效果了。

把这个原理搞懂之后就会发现其实并不复杂，但是Kai Laborenz自己能够想到这种方法，确实令人敬佩，值得我们学习！

点击这里下载本案例的素材和网页zip文件。

如果初学者对CSS的基本知识和定位属性不熟悉，请点击这里观看CSS教学视频。

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

回答读者提问(20)——关于“内容管理系统”（CMS）

2008年02月15日 星期五

今天看到frankfang读者的问题，感觉是一个比较有普遍性的问题，可以在这里回答更深入地介绍一下。当然这里只是一个概括性的介绍。frankfang读者的问题是：

“我的问题就是有没有一整套的案例(包括很多页面的整套),不是一个页面的案例,我做网站时里面有很多的连接到新的页面,新的页面就是文字内容不同,布局都相同,这样整个网页就有很多的HTML文件,听别人说只要一点小程序就能搞定.所以想请教老师能不能提供一些——-典型的,整套的网页案例,给我们参考!!”

实际上这个问题已经不是如何制作出一个页面的问题，而是建立一个综合的网站的问题了。

历史回顾

首先回顾一下网站开发的历史，从中我们可以看出技术的发展趋势，相信对读者也会有所帮助的。互联网比较大规模的进入中国应该是从1998年开始的，而在当时制作网页，一般人基本上就是使用一种技术——“HTML”语言，在加上一些非常简单的图片。

这样制作出来的网页不但非常简陋，而且制作效率也很低。我们可以设想一下，网页是用HTML语言编写的，被称为静态页面。一旦写好，除非改写这些HTML源代码，否则无法更改网页上的内容。这样就会遇到一些问题无法解决。比如说，一个网站希望向访问者提供全世界10000个地区的天气预报信息，如果只有HTML作为工具，就必须每天为每个城市开发一个页面，以便访问者找到某一城市相应的页面，来获取信息。可想而知，如果每天要制作这么多网页，需要很大的人力，如果网站要求更复杂呢？这是一个不可能完成的任务了。

不完善的办法

那么怎么办呢？这时逐渐大家开始使用Dreamweaver这个软件了，Dreamweaver提供了一种称为“模版”的功能，也就是先制作一个模版页，然后产生出多个页面，分别填写不同的内容，这种方法不需要其他技术，但是如果你实际使用过，就会发现这还是比较麻烦，基本上还是“人肉”方式。而且对于真正复杂的页面，还是不现实的。即使是一个像我们前沿视频教室这样一个不算复杂的网站，要求能够不断地增加新文章、可以让读者留言，还可以回复等等，这种方式是完全不够用的。

服务器出场

那么怎么办呢？就必须要使用服务器的功能了，也就是说，网页必须是在服务器上动态生成的，同一个页面，在服务器上根据不同的访问参数生成不同的页面效果，这样就一劳永逸了。还用上面的天气预报的例子来说：只需制作一个页面，在这个页面需要显示天气信息的地方从数据库中取得相应数据，即页面的样子都是通过HTML来做好的，只是相应的数据从数据库中获取。那么只要做好一个页面，就可以根据不同的城市代码，从数据库中获取相应的数据，从而实现“一劳永逸”的效果。

CMS横空出世

这样问题就又出现了，网站的开发过程变的更复杂了，技术要求更高了，不但需要设计前台的页面效果，还需要开发后台的程序，这种程序的开发语言有很多种，现在流行的有ASP.net\PHP\Java等等，掌握这些编程技术都比学习HTML要复杂的多。要用这些语言写出一个完善的网站来，不是一件轻松的事情。

那么怎么办呢？逐渐地，人们发现，实际上网站无论多么千奇百怪，归纳起来功能通常很多都是十分相似的。比如要求能够方便地发文章、要能够让访问者留言，这可以称为“文章系统”或者叫“新闻系统”，再比如各种论坛也是大同小异的，还有比如博客网站，也是相似的。这样一些技术人员和软件公司，就仔细研究在某一领域的网站的共性要求，开发出一些通用的网站系统。这样要建立网站的人只需要把相应的系统安装到服务器上，就可以立即拥有一个完善的网站了，同时这些系统都是具有一定的灵活性的，可以进行网站外观和功能模块的定制，你会发现使用同一种系统大家出来的网站的外观是完全不同的，当然CSS在其中也发挥了巨大的作用，也就我们反复强调的网站内容与表现的分离。总而言之，这类系统都称为“内容管理系统”（Content Management System）。比如前沿视频教室使用的就是Wordpress这个系统，它是完全免费的开源系统。

具体怎么做?

好了，这样就简单了，你要建网站，首先要确定的是：你要做的是一个什么类型的网站，博客？论坛？商店？门户？教学？然后找到一个相应的，和你的需求最接近的CMS系统，然后安装好它，找一些相应的资料，学习如何使用它，如何定制功能，如何设置外观布局，然后你就专心于网站的内容就可以了。

当然，一个网站主要有三个方面：内容、表现、功能。

一个CMS系统可以提供相应的功能；你要建立一个网站，内容自然由你来负责，关于香车还是关于美女都由你来决定；来这里呢，你可以学习到一些关于表现形式的知识和技术，比如全世界可能有几百万个网站都和我们一样使用Wordpress来搭建的，但是外观却各不相同，这就是您掌握了CSS等网页设计的本事以后，随心所欲的设计了。

因此，现在要建立一个网站，通常不需要从零开始一点点写了，选用一个适当的CMS系统，真正把它搞通，搞明白，几乎所有的网站都可以建立出来。所以这里顺便可以说一句的是，网站建设是一个入门门槛很低，想真正做好又门槛极高的行业。

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

回答读者提问(19)——再谈浏览器的兼容性

2008年02月03日 星期日

关于浏览器的兼容性问题，我写过一篇小文章，《回答读者提问(12)——关于CSS在不同浏览器的调试经验》。今天在就这个问题，谈一些制作中的技巧。

首先，关于CSS hack的方法网上有很多介绍，种类繁多，初学者常常感到很困惑。这类的CSS hack的方法，有的是针对某一个非常特殊的情况的方法，有的则是相对于比较通用的一些方法。

对于后者我们在平常的学习工作中，可以多留心收集一些，前者则不需要太关注，只是遇到的时候到网上搜索一下，寻找解决方法即可。

这里举一个比较通用的hack方法，比如对于CSS中的某一个属性，我们希望针对不同的浏览器，设置不同的值。例如，某一个div，我们希望在Firefox中宽度为50像素，在IE中宽度为60像素。那么怎么实现呢？请看如下代码：

1
2
3
4

#demo div{
     width:50px;    /* FireFox 有效 */
    +width:60px;    /* IE 有效 */
}

在上面的代码中, 第2行的width:50px这是普通的样式，下一行中，在width属性前面加一个加号，这条样式在Firefox中被认为无效，但是在IE中这个加号会被忽略掉，因此仍然被理解为width属性，从而覆盖上一条的设置，这样就可以区分Firefox浏览器和IE浏览器了。

那么如果希望进一步区分IE 6和IE 7呢？请看如下代码：

1
2
3
4
5

#demo div{
     width:50px;    /* FireFox 有效 */
    +width:60px;    /* IE 7 有效 */
    _width:70px;    /* IE 6 有效 */
}

上面代码就可以实现对三种浏览器的区分了。在IE7中，属性前加一个加号，这个加号会被忽略，而如果在属性前加一个下划线这整条样式会被忽略，从而实现了对这三种主流浏览器的区分。

到这里，我们自然会想到，什么情况下会用的这种方法来区分浏览器呢？我们要制作的页面，通常会有两种情况，一种是彻底从头开始做，另一种是基于一个已经存在的网页进行修改或者修补。

对于第一种情况来说，我们对网页的每一个细节都十分清楚，因此并不经常遇到非常Firefox和IE的兼容性问题，即使遇到了，一般也可以找到其他方法解决。而对于第二种情况来说，则复杂的多了，因为一个网页可能非常复杂，层叠关系也很复杂，对于后接手的人，很难搞清楚某一个的属性上面有多少层设置会对他产生影响，因此往往只能采用“贴膏药”的方式进行修补。

比如说，如下的一个页面的最终效果，在制作圆角框的时候，在IE中，圆角对整齐之后，在firefox中却出现如图所示的错位，而如果按照Firefox调整好，在IE中又会出现错位。

CSS圆角错位

而页面的内容层层嵌套，在并不知道细节的情况下，很难找到问题的根源。因此这里使用修补的方法就很方便（尽管不是最优雅完善的方法），例如对于控制圆角图像位置的属性使用上面的方法，分别控制即可。

总上所述，对任何属性都可以使用加号或者下划线方法，来实现针对不同浏览器的各自设置。当然，最后还是要指出，任何hack方法都要慎重使用，最好还是能够按照标准、优雅的CSS来进行设计，这样的代码可读性、维护性都要好很多，也是我们追求的目标。

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

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