结庐在人境,而无车马喧。 问君何能尔?心远地自偏。 采菊东篱下,悠然见南山。 山气日夕佳,飞鸟相与还。 此中有真意,欲辨已忘言。
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
CSS+Div布局总结
xml(extensible Markup Language)的出现,结构化文档和数据有了一个通用的、科适应的格式,不仅仅应用在web上,也可以应用在任何地方。标准称为可能。
XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。在HTML4.0的基础上,用XML的规则对其进行扩展,得到了XHTML。它实现HTML向XML的过渡。
CSS是Cascading Style Sheets层叠样式表的缩写。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构,使站点的访问及维护更加容易。

1)为页面添加正确的DOCTYPE
DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你 DOCTYPE定义的DTD(文档类型定义)来解释页面代码。
XHTML1.0提供了三种DOCTYPE可选择:

2)设定一个名字空间(Namespace)
直接在DOCTYPE声明后面添加如下代码:
html XMLns="http://www.w3.org/1999/xhtml" >
一个namespace是收集元素类型和属性名字的一个详细的DTD,namespace声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。

3)声明你的编码语言
为了被浏览器正确解释和通过标识校验,所有的XHTML文档都必须声明它们所使用的编码语言。代码如下:
meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
这里声明的编码语言是简体中文GB2312,你如果需要制作繁体内容,可以定义为BIG5

(1)过渡型(Transitional )--使用非常普遍。
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

(2)严格型(Strict )
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd">

(3)框架型(Frameset )
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

4)用小写字母书写所有的标签
XML对大小写是敏感的,所以,XHTML也是大小写有区别的。所有的XHTML元素和属性的名字都必须使用小写。否则你的文档将被W3C校验认为是无效的。

5)为图片添加 alt 属性
为所有图片添加alt属性。alt属性指定了当图片不能显示的时候就显示供替换文本,这样做对正常用户可有可无,但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性,代码才会被W3C正确性校验通过。注意的是我们要添加有意义的alt属性,象下面这样的写法毫无意义:
img src="logo.gif" alt="logo.gif">
正确的写法:
img src="logo.gif" alt="文字">

6)给所有属性值加引号
在HTML中,你可以不需要给属性值加引号,但是在XHTML中,它们必须被加引号。还必须用空格分开属性。
例: hr width="75%"size="7"/> 这也是不正确的

7)关闭所有的标签
在XHTML中,每一个打开的标签都必须关闭。空标签也要关闭,在标签尾部使用一个正斜杠"/"来关闭它们自己。例如:
br />

8)收藏夹小图标
例如:首先制作一个16x16的icon图标,命名为favicon.ico,放在根目录下。然后将下面的代码嵌入head区:
link rel="icon" href="/favicon.ico" type="image/x-icon" />
link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

9)用CSS定义元素外观
用css布局的一个好处是可以批量对页面进行修改,它能将文档结构和表现层分离开来,减轻工作量和服务器的负荷,加站点的扩展能力和应用。
dreamweaver为我们提供了非常方便的方法去编写css.

css是不区别空格和大小写的,下面是一些基础的归纳

(1)颜色值
颜色值可以用RGB值写,例如:color : rgb(255,0,0),也可以用十六进制写,就象上面例子color:#FF0000。如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。

(2)定义字体
web标准推荐如下字体定义方法:
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
Lucida Grande字体适合Mac OS X;
Verdana字体适合所有的Windows系统;
Lucida适合UNIX用户
"宋体"适合中文简体用户;
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;

(6)类别选择器
在CSS里用一个点开头表示类别选择器定义,例如:
.14px {color : #f60 ;font-size:14px ;}
在页面中,用class="类别名"的方法调用:
span class="14px">14px大小的字体
这个方法比较简单灵活,可以随时根据页面需要新建和删除。

(7)定义链接的样式
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。

(8)组合使用选择器创造精致的设计效果
用漂亮的图案代替普通无序列表前沉闷的点。站点http://marine.happycog.com/
先用css规则告诉类别属性inventory的无序列表。
ul.inventory{
list-style:disc url(/images/common/lister2.gig) inside;}
它的调用标记:
ul class="inventory">
li> a href="/angelfish">Angelfish(67 items)
li> a href="/angeld">Angels/Frogfish(35 items)
li> a href="/anthias">Angelfish(5526 items)
li> a href="/basslets">Angelfish(15 items)
ul>

(9)缩写是按照顺时针的顺序
margin:25px 0 25px 0;

(10)行高
line-height:150% 说明行距为正常的150%

10)结构化代码div(division)、id、class
用它们来书写紧凑的xhtml,更明智的使用css.

(1)结构化id标签,与class的有区别:
如果你的属性页面包含了一个div,它的id为"content",它就不可能有另外一个div或者其他元素拥有相同的名字。相反,class属性可以在意个页面中一次又一次地使用。

(2)id的规则
一个id值必须用一个字母或者下划线开头,它不能用一个数字进行开头,然后跟随字母、数字和下划线。空格和连字符-都是不允许的。

11)制作好的网站可以到w3c进行标准校正
http:validator.w3.org
http://jigsaw.w3.org/css-validator/

(3)群选择器
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
p, td, li { font-size : 12px ; }

(4)派生选择器
可以使用派生选择器给一个元素里的子元素定义样式,例如这样:
li strong { font-style : italic; font-weight : normal;}
就是给li下面的子元素strong定义一个斜体不加粗的样式。

(5)id选择器
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
div id="menubar">

然后在样式表里这样定义:
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。

id选择器也同样支持派生,例如:
#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
スポンサーサイト
PEEK-设计研究工作室I
袁翔老师在湖南大学设计艺术学院的网站上开了一个专栏PEEK,内容是他在美国学习的设计课程情况,看了之后觉得很有用,就给袁翔老师发了mail,申请收藏了过来。
注意:
以下内容(文字、图片)版权均归袁翔老师所有,图片中的作业的版权归学生本人所有,仅供学习交流。


image_002.jpg

大家好,今天向大家介绍的是DAAP设计专业研究生1年级课程《设计研究工作室 I》(Design Research Studio I),任课教师是Craig Vogel教授。作为研究生的入门课,课程的主要目的是培养学生的设计思辩能力(Design Argument Development)。课程包含讲授、调查、讨论、报告等多个环节,是典型的Studio教学形式。课程的最后,每个学生都必须提交一篇4-5页的论文,为自己的研究课题设计一张海报,组织一次公开报告会(Open Presentation)同时邀请学院的其他师生参加。本人有幸被Craig招募为这门课的"准学生"(Semi-Student),并且参加了最终的汇报。这里,我将向大家介绍本人在报告会上演示的PPT:

报告的主题是对互联网上banner广告未来发展方向的探讨。
image_003.jpg


通过考察互联网上banner广告的发展历程,来推断未来可能的发展方向。
image_004.jpg


世界上最早网页诞生于1991年美国的斯坦福大学,由于当时的技术限制,浏览器不能显示图片,估计此时也没人意识到要在网页上投放广告。
image_005.jpg


1994年,技术的不断发展让浏览器具备了图片显示能力,立刻有好事者在网页上张贴了历史上第一个banner广告。据考,此好事者乃当今美国大名鼎鼎的通信公司AT&T。值得注意的是,这个banner的平面设计简单至极:只有白双色(注:图中文字上的色斑是由于截屏后压缩导致的,并非设计师的本意);没有任何图形设计;主要信息几乎全是通过来文字表达;而其行文措辞现在看来又如此可笑。我们需要思考的是,尽管当时浏览器可以显示图形,为什么这个banner的设计并没有运用大量图形,而仍是以文字为主呢?为什么行文中没有直接宣传AT&T公司的产品或服务,而要强调“鼠标点击”呢?
image_006.jpg


浏览器技术渐渐成熟,显示器也不断大,网页上banner的内容越来越丰富,数量越来越多。
image_007.jpg


banner的设计受到网页界面设计的制约,为了适应不同页面的布局需要,banner需要不断变化自身的形式,横的、竖的、方的……
image_008.jpg


随着banner业务的逐渐成熟,出现了专门的banner设计公司,形成了banner设计的行业标准,甚至还冒出了banner设计竞赛。banner设计走向产业化。令人惊讶的是,banner开始反过来制约网页的界面设计。如果客户打算在网站上投放banner,网页设计者就必须根据banner的设计标准来考虑页面的布局。
image_009.jpg


利益的驱动让banner占领了网页上大量的屏幕空间,但它仍不满足,甚至得寸进尺,跳出屏幕……
image_010.jpg


用户开始反击,各种反banner技术出台:拦截弹出窗口,禁用Javascript,禁用Flash控件甚至限制图片显示……
image_011.jpg

image_012.jpg


Banner变聪明了,把自己藏在网页的背景中。
image_013.jpg


Banner把自己伪装得跟正文一样。Google虽然把搜索结果放在左边,广告放在右边,但两者使用了完全相同的CSS样式来显示。
image_014.jpg


前面了解到,banner可以“藏”,即设法让用户“忽略”其存在。下面的banner则反其道而行之,采取了“显”的策略,即变着花样让自己更有吸引力。例如在banner中播放视频。
image_015.jpg


或者把banner变成具有互动性的小游戏。
image_016.jpg


或者让banner具有某种功能,以体现其价值。
image_017.jpg


Banner越来越聪明了,但是未来的banner会有什么不同呢?会遇到什么新的挑战呢?
image_018.jpg


新挑战1:移动设备的广泛应用。iPhone的热销不禁让人们感叹一个伟大的移动时代即将到来。可是移动设备的显示面积都极其有限,而且这个年轻的市场还没有形成统一标准。当前的banner设计绝大部分都不能适应移动环境。另外,移动设备的电池容量有限,现在banner包含大量gif动画、flash甚至是视频,用户是否同意把宝贵的电量消耗在无用的banner上呢?可以想象,一方面,页面设计者在针对移动设备时会尽量减少banner在页面中的出现频率;另一方面,一旦用户有了选择的余地,将会尽量避免访问那些含有大量banner的页面。这将是一个双向选择的过程。
image_019.jpg


新挑战2:新闻聚合。在web2.0时代,越来越多的人使用新闻聚合技术来浏览信息。新闻聚合技术能让人通过一个专门界面快速浏览来自各个不同站点的信息,而不需要在浏览器中加载那些站点的界面。也就是说,用户不用直接访问那些站点也不会看到网站中的banner广告。目前的新闻聚合技术极大地提高了用户浏览信息的效率,却也大幅降低了其看见banner的几率。从这一点上可以说,新闻聚合是banner的敌人。
image_020.jpg


新挑战3:Widget。用过Windows Vista和 Mac OS X的人对Widget一定不陌生。Widget能够让用户直接获取各种网络服务而无需打开浏览器访问相应站点。用户可以通过安装不同的Widget来炒股、查天气、查邮件、搜索网页、听广播、看视频等。目前,Yahoo与Adobe等公司都在这一领域开发了各自的技术平台(Yahoo Widgets, Adobe AIR)。与新闻聚合一样,Widget绕过了网站界面,绕过了banner,直接向用户提供信息和服务,也是banner的大敌之一。
image_021.jpg


Banner今后面临的挑战可能并不止这些,但目前一个更为严重的问题已经摆在我们面前。今天我们之所以能在线享受各种免费资讯和服务,主要是因为banner用其广告费替我们买了单。可如果我们不断开发出新的技术,并想方设法将banner出我们的屏幕,是否就意味着免费时代的终结?
image_022.jpg


个人观点:1、用户不会允许免费时代的终结,今后的banner很难消亡。2、新的需求和技术会迫使目前banner的形态、标准和设计发生巨大变化。3、未来的banner也许不会直接在界面上显示出来,而是隐藏在某处。4、用户的意图将是驱动banner为可见的关键。
image_023.jpg


结论:如何正确理解用户意图将是未来banner设计最大的挑战。历经了十几年的发展,banner设计似乎走到了一个转折点。之前的banner设计一直沿袭传统媒介上的广告设计思路,强调字体、图形、色彩、动画、创意等因素,其核心是强视觉吸引力。而Google广告业务的成功却揭示了问题真正的核心。Google广告业务占美国互联网广告40%份额,其卖得最好的广告居然是看上去最普通的文字广告,而成功的关键并不在于其广告“看起来怎样”,而在于Google利用其搜索引理解了用户的意图,仅投放与用户意图相关的广告内容。这又不得不让人联想起近期广告商们大举进军FaceBook、MySpace等社交网站(Social Network)的情景。广告商关注社交网站的动机是什么?恐怕不是因为他们坚信今后社交网站将会成为互联网发展的主流,而是因为,通过与社交网站合作,广告商可以更深入的了解其会员的社会关系和个人信息,从而在投放广告时更好地理解他们的意图。由此出发再想想今后的banner广告,似乎“引人注目”已经是条可望不可及的要求了,因为广告商在询问用户看着广告感觉怎么样之前,先得问问自己该不该把广告拿给这个用户看。
image_024.jpg


Craig教授的点评:广告与受众的博弈在传统媒体(报纸、广播、电视、有线等)已经上演多年,目前已经进入了一个相对稳定的状态,基本规则是无广告的内容收费而免费的内容则插入广告。目前互联网上的广告也引入这套规则,却问题不断。一方面是人们总觉得互联网上的内容就应该是免费的;另一方面是互联网与以往的传统媒介不同,传统媒介是一个封闭系统,而互联网是一个开放社区。封闭系统下只有一个规则制定者,在报纸媒体是报社、在电视媒体是电视台,他们控制着技术、渠道和标准,受众可以不接受他们的服务,但必须遵守他们制定的规则。而互联网是一个开放的社区,技术、渠道和标准都是开放的。因此在互联网上,无论内容发布者怎样设法将广告和服务绑定起来,总有人能开发出新的技术、渠道和标准将其分离,于是内容发布者又要重新绑定,然后又被分离,最终形成一个猫鼠游戏的格局。这就好像iPhone,Apple即想让它接入互联网(一个开放系统),又想把它跟AT&T绑在一起。其结果就是Apple不得不定期更新iTune以阻止iPhone被破解,而每次新的补丁推出不久,就有新的破解问世。 因此,如何在开放系统下制定一个双赢的规则,一直是互联网面临的最大挑战。

除本人外,会上还有6名研究生对各自的研究课题作了报告。内容包括可持续设计、社会设计(Social Design)、产品开发中的隐喻与创新、设计中的东西方文化差异等多个主题,每人报告20分钟,并且还有20分钟的问答和点评,而这些内容由于本文篇幅限制无法一一细述。我们从教学的安排上可以看出Craig的用心,他不但要求学生陈述自己的思想和观点,还要求学生能用不同的方式陈述。这些方式既包括报告、论文,也包括设计。在Craig看来,专门设计能力的培养应该在本科生阶段完成,而综合能力的提升是才是研究生课程的核心。

袁翔老师更新日期:2007-11-29
原文地址:http://design.hnu.cn/
老爸去看老爸的爸爸了,平常心,平常心...............
老爸今天下午的火车
直接就去沈阳看我爷爷了
唉..........
矛盾啊,纠结.........
一直在围绕着同一个问题打转
原来这次老爸还是带着老妈的特殊使命
老问题了
从一进大四就开始围绕着这个问题纠结了
老爸说老妈因为我不回山东瞪眼
可我真的不想回去
出来这么多年了
心大了,回去就难了
纠结...........
CSS hack浏览器兼容
一、HACK
以下两种方法几乎能解决现今所有HACK.

1, !important

随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
/style>

2, IE6/IE77对FireFox

*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
style>
#wrapper
{
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
}
/style>

注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

二、万能 float 闭合

关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需要闭合的div加上 class="clearfix" 即可,屡试不爽.

style>
/* Clear Fix */

.clearfix:after
{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
/style>

三、其他兼容技巧

1, FF下给 div 设置 padding 后会导致 width 和 height 加, 但IE不会.(可用!important解决)
2, 居中问题.
1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题.
5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.

===================================================================

1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,
但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针
对IE7不错的hack方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了。
现在写一个CSS可以这样:
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */
那么在firefox下字体颜色显示为#333,IE6下字体颜色显示为#666,IE7下字体颜色显示为#999。

2 css布局中的居中问题

主要的样式定义如下:
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明:
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,
只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

3 盒模型不同解释

#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}

4 浮动ie产生的双倍距离

#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果 diplay:table;
IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,
正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。
比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:
#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

6 页面的最小宽度

min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,
而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个
放到 标签下,然后为div指定一个类:
然后CSS这样设计:
#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}
第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7 清除浮动

.hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;}
或者加入:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持,
所 以并不影响到IE/WIN浏览器。这种的最麻烦的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;}

8 DIV浮动IE文本产生3象素的bug

左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.
#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}
HTML代码
div id="box">
div id="left">
/div>
div id="right">
/div>
/div>

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)

p[id]{}div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.

10 IE捉迷藏的问题

当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。
解决办法:对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。

11 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用
margin 或paddign 时。
例:
div id="box">
p>p对象中的内容 /p>
/div>
CSS:#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解决方法:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。
43个你应当避免的Web设计错误
这是一篇关于网站易用性的文章,作者以亲身体会讲述了43条网站设计中常犯的错误,而无疑这些错误会大大影响网站的可用性。如今网站易用性已成为一种趋势,但纵观国内的各大网站,似乎易用性并未成为设计者们广泛理解的概念。

1. 用户必须在几秒钟知道网站是做什么的。
注意力是因特网上最有价值的货币。 如果访问者无法在几秒钟之内得知你的网站的方向,他很有可能转而访问其他网站。 你必须迅速地告诉访问者为什么要在你的网站上花费时间。

2. 让网站易于速读。
因特网不是书,因此没必要使用大段的文字。 也许我访问你的网站时我正在忙于其他工作,我不得不迅速读完所有内容。 项目符号、标题、副标题、列表,这些都能帮助读者迅速找到他想要的内容。

3. 不要使用难于阅读的花哨字体。
当然,某些字体可以让网站精彩纷呈。 不过它们容易阅读吗?如果你的主要目的是传递信息并让读者阅读, 你应该让阅读过程舒服些。

4. 不要用小字体。
如上一条所述,你得让读者阅读时感到舒服。 虽然我的Firefox有放大功能,但如果必须放大才能看清一个网站的话, 我就再也不会去访问它了。

5. 不要打开新浏览器窗口。
我的第一个网站曾经经常这么做。 原因很简单,在新窗口中打开外部链接,用户就不必离开我的网站。 错!让用户决定如何打开链接,否则浏览器上大大的后退按钮就没必要存在了。 不用担心用户离开你的网站,在必要的时候他们会回来的。

6. 不要改变用户的浏览器窗口大小。
用户有权控制自己的浏览器。 如果你改变窗口大小,你会在他们面前失去信用。

7. 不必要时不要让用户注册。
直白地讲,我上网是为了获取信息,不是为了别的。 不要强迫我注册并留下我的电子邮件以及其他信息,除非特别必要(比如你 能提供的消息非常有价值)。

8. 不要在未经访问者同意的情况下为他们订阅电子杂志。
不要在访问者注册时自动给他们订阅电子杂志。 不请自来的邮件可不是个交朋友的好办法。

9. 不要过多使用Flash。
Flash不仅会加网站的读取时间, 过度使用甚至会让访问者感到不快。只有当静态页面无法表达你的意图时 才使用Flash。

10. 不要播放音乐。
早些年Web开发者都喜欢在网站中集成音乐,结果他们失败了。 记住,永远不要使用音乐。


11. 当你必须使用声音时,让用户启动它。
有时你必须使用声音文件, 比如你要给用户发送一份演讲,或者你的教程包含声音。这没问题,但要让用户来控制, 让用户点击“播放”按钮,别在打开网页的瞬间播放声音。

12. 不要让标志弄乱你的网站。
社交网络和社区的标志会让你的网站看起来十分不专业。 就算是奖章和荣誉等标志也应当放到“关于我们”页面上。

13. 不要使用“点击进入”页面。
用户访问到内容的步骤越少越好。

14. 注意要留下联系方式。
最差的莫过于网站没有留下联系方式的了。 不仅对访问者不友好,而且对你也没好处,你会错过珍贵的反馈信息。

15. 不要影响“后退”按钮的动作。
这是网站可用性的最基本的理念。 在任何情况下都不能影响“后退”按钮的动作。比如,打开新窗口会破坏它, 某些Javascript链接也会破坏它。

16. 不要用闪烁的文字。
除非你的访问者来自1996年,否则别用闪烁文字。

17. 避免复杂的URL结构。
一个简单的基于关键字的URL结构不仅能提高你的搜索引排名, 还能让访问者在访问之前了解网页内容。

18. 用CSS布局,不要使用表格。
HTML表格曾经被用于页面布局, 但没有必要拘泥于此,尤其是在CSS诞生之后。CSS更快、更稳定, 并能提供更多的特性。

19. 保证用户可以搜索整个网站。
搜索引带来因特网革命的原因,就是 它使得信息查找变得十分容易。别在你的网站上唱反调。

20. 避免使用下拉菜单。
用户应当直观地看到所有导航选项。 下拉菜单会造成混乱,并且会隐藏访问者真正要找的信息。

21. 使用文字做导航栏。
文字导航不仅速度快,而且更稳定。 例如,有些用户上网时会关闭图片。

22. 如果需要链接到PDF文档,一定要注明。
你一定有过点击链接之后, 浏览器就像死掉一样等待Acrobat Reader启动,只为了打开一个(你不想看的)PDF? 这是个不小的麻烦,因此一定要在指向PDF的链接旁特别说明,使用户可以采取相应措施。

23. 不要用多种版本让访问者迷惑。
你想用哪种带宽?56Kbps?128Kbps?Flash版还是HTML版? 嗨,我只想快点看到内容!

24. 不要在内容中混合广告。
在内容中混合广告(如Adsense)也许会加短期内的广告点击率, 但从长远角度来看,这会减少网站的人气。愤怒的用户会离开的。

25. 使用简单的导航结构。
过犹不及。这个规则通常适用于人和选择上。 确保你的网站的导航结构单纯简洁。你不想让用户在查找信息时遇到麻烦吧?

26. 避免内容介绍。
别强迫用户在访问到真正内容之前看某些东西。 这很令人愤怒,除非你提供的信息是用户必须的,否则他不会等下去。

27. 不要使用FrontPage。
这一点也适用于其他廉价的HTML编辑器。 它们让页面设计变得更方便,但其输出结果将会非常低级,不兼容不同的浏览器, 并且会包含错误。

28. 保证你的网站兼容大部分浏览器。
浏览器并不完全相同,在解释CSS和其他 语言的方法也相差甚远。不管你是否愿意,你应当让网站兼容市面上的常用浏览器, 否则你会永远地失去部分读者。

29. 保证在链接上添加有意义的文字。
以前我经常犯这个错误。告诉人们“点击这里”很容易, 但这没有效果。要保证链接文字有意义。它使得访问者知道点击链接之后将出现什么, 也能为链接指向的外部站点带来SEO效果。

30. 不要在状态栏中隐藏链接。
用户还必须能在状态栏中看到链接指向哪里。 如果你隐藏了链接(即使是由于其他原因),那么你也会丧失信誉。

31. 使链接可见。
访问者应能轻易识别出哪些能点击,哪些不能。 确保链接的颜色有强烈的对比(标准的蓝色通常是最好的)。可能的话, 最好加上下划线。

32. 不要在普通文本上添加下划线或者颜色。
除非特别需要,否则不要为普通文字添加下划线。 就像用户需要识别哪些能点击一样,他们不应当将本不能点击的文字误认为能够点击。

33. 改变访问过的链接的颜色。
这一点对于提高网站可用性非常重要。 改变访问过的链接颜色有助于用户在网站中定位,确保他们不会不经意地 访问同一页面两次。

34. 不要使用动态GIF。
除非你有需要动画的广告条,否则避免使用动态GIF。 它会使网站看上去很业余,并且会分散访问者的注意力。

35. 给图像添加ALT和TITLE属性。
ALT和TITLE不仅会带来SEO效果,而且 对盲人有很大帮助。

36. 不要用令人不快的颜色。
如果用户连续阅读10分钟后觉得头疼, 那么你最好选择别的配色方案。根据你的目的决定设计(例如,创造一种氛围 使得用户将注意力放在网站内容上,等等)。

37. 不要弹出窗口。
这一点涉及任何种类的弹出窗口。即使用户要求使用, 弹出窗口也不宜使用,因为它会被弹出窗口拦截功能阻拦。

38. 不要使用Javascript做链接。
远离那些点击之后执行一小段Javascript的链接, 它们经常给用户带来麻烦。

39. 在页面底部放置有意义的链接。
访问者在找不到所需信息时通常会滚动到页面最底端。 作为最后的手段,你应当在页面底部放一个“联系我们”页面的链接。

40. 避免网页过长。
如果用户老是需要滚动才能看到内容,他通常会采取的做法是 跳过它们。如果你的网站正好如此,那么应当缩短内容并优化导航结构。

41. 禁止使用水平滚动条。
虽然垂直滚动条可以接受,但水平滚动条却远非如此。 现在的流行分辨率是1024x768,要确保网站能容纳在其中。

42. 禁止出现拼写或语法错误。
这不是网站设计的错,但却是影响网站整体质量的重要因素。 确保链接和文字中没有拼写或语法错误。

43. 如果你使用图片认证,要保证能看清其字符。
有些网站将图片认证作为对抗垃圾评论的方法, 或是在注册表单上使用。其中有个问题就是,用户经常需要叫上全家人来讨论图片上到底是什么字母。
养鱼全记录
生活,总是充满了意外
昨天晚上回家
惊见厨房下水管堵了
水漫金山,全灌了
和蕾蕾当场就傻眼了
太欠了
太欠了
从么遇到过这样的情况
客厅都能养金鱼了
....................
老大还加班
错过了最精彩的时刻
只上了收尾工作
折腾到1点多才睡
生活........

俺和拖把的同甘共苦.....
IMG_0655.jpg


拖把和垃圾筒的love love生活........
IMG_0666.jpg


拖鞋戏水........
IMG_0670.jpg


波光粼粼,波澜不惊..........
IMG_0671.jpg


案件现场......
IMG_0676.jpg


对这次事件,娜娜同学完全么语言
蕾蕾和娜娜一样,都从来么见过这么大场面
所以,都傻了
老大和超超都比较晚回来
所以,么见到蕾蕾和娜娜的失当之处
万幸....

以上..........
PEEK-数码设计IV(体验)
袁翔老师在湖南大学设计艺术学院的网站上开了一个专栏PEEK,内容是他在美国学习的设计课程情况,看了之后觉得很有用,就给袁翔老师发了mail,申请收藏了过来。
注意:
以下内容(文字、图片)版权均归袁翔老师所有,图片中的作业的版权归学生本人所有,仅供学习交流。


image0002.jpg

大家好,今天向大家介绍的是DAAP数码设计五年级(毕业班)课程《数码设计IV(体验)》(Digital Design IV:Experience),任课老师是Yanling教授。课程的主要目的是让学生探索现有产品或服务中 的体验问题,并针对特定的用户群提出相应的解决方案。本次课程的研究对象是辛辛那提动物园(Cincinnati Zoo),学生们已经分组去动物园进行了实地考察,而在这节课上各组将把他们的想法拿出来与大家一起讨论:

Team1: Zoo Safari。根据Team1的陈述,Zoo Safari是为专儿童定制的一条游览路线。这条路线沿途将设有各种与动物相关的标识和信息,孩子们可以根据自己的兴趣收集这些信息,并提交给路线终点处的多媒体终端。接着孩子们可以进入Safari Center——一个虚拟展厅,而Safari Center将根据提交的信息向孩子们展现不同的虚拟场景……

Zoo Safari标识。
image0003.jpg


体验流程。
image0004.jpg


导游手册。
image0005.jpg


Safari Center平面示意图。
image0006.jpg


Safari Center 3D示意图。
image0007.jpg


Team2: Zoo for Visually Impaired。Team2主要关注视障人士的体验问题,这一话题引发了大家积极地讨论。有人提出,为了弥补 视障上的缺陷,设计方案应更强调听觉上的体验,如向视障人士播放 特定动物的声音以提示他进入了此动物的活动区域。还有人认为应该 设计相应的装置让视障人士感受动物的皮毛和体格。甚至有人提出在 特定区域散发特定动物的气味(不过气味方案很快被否决,因为大多 数人不喜欢动物的气味)。
image0008.jpg

image0009.jpg

image0010.jpg

image0011.jpg


用不同的路面纹理代表不同的游览路线
image0012.jpg


Team3: Customized Map。辛辛那提动物园规模大内容多,并且在不同时间段特定的园区还会开放专门的主题活动,如何在有限的时间内合理安排游览路线成了一个重要的问题。Team3的计划是设计一个在线交互程序,帮助人们根据游览当日园区的活动安排自己定制 游览路线,支持打印或下载到移动设备,还可以跟好友分享。而动物 园也可利用这个程序在不同的档期向人们推出特别的“游览套餐路线 ”。

地图上的图标设计
image0014.jpg


使用不同的色彩表示图标不同的状态(点击、选中、激活等)
image0015.jpg


动物园目前的地图。
image0016.jpg


交互式地图的界面原型。
image0017.jpg


Team4: Insect House。
Team4计划改进动物园昆虫馆的设计, 着重突出“运动中的昆虫”这一主题。
image0018.jpg


左侧是目前的设计,右侧是新的设计方案。
image0019.jpg


图形设计方案。
image0020.jpg


一个有趣的交互装置。当来访者用力击打绿色区域后,该装置将根据来访者的体格和力量的比值在左侧的屏幕上显示出最接近的昆虫 。
image0021.jpg


一个交互程序的界面原型。来访者通过这个界面来体验昆虫的运动方式。
image0022.jpg


从以上这些方案来看,虽然演示的形式很简单,但问题的定义很清晰,大家的思维也很活跃。另外值得注意的是,这些方案最初并不很完善,而正是通过课堂上的开放讨论,学生的思路才逐渐明了。高年级的设计课程中讨论往往占了很大比例,因为许多问题,根本不用教师指导,在被同学提出的过程中就自动消化了。


袁翔老师更新日期:2007-11-15
原文地址: http://design.hnu.cn/
常用CSS缩写语法总结
  使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则如下:

  颜色
  16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:
  #000000可以缩写为#000;#336699可以缩写为#369;

  盒尺寸
  通常有下面四种书写方法:
  property:value1; 表示所有边都是一个值value1;
  property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
  property:value1 value2 value3; 表示top的值是value1,right和left的值是value2,bottom的值是value3
  property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left
  方便的记忆方法是顺时针,上右下左。
具体应用在margin和padding的例子如下:
  margin:1em 0 2em 0.5em;

  边框(border)
  边框的属性如下:
  border-width:1px;
  border-style:solid;
  border-color:#000;
  可以缩写为一句:border:1px solid #000;
  语法是border:width style color;

  背景(Backgrounds)
  背景的属性如下:
  background-color:#f00;
  background-image:url(background.gif);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:0 0;
  可以缩写为一句:background:#f00 url(background.gif) no-repeat fixed 0 0;
  语法是background:color image repeat attachment position;
  你可以省略其中一个或多个属性值,如果省略,该属性值将用浏览器默认值,默认值为:
  color: transparent
  image: none
  repeat: repeat
  attachment: scroll
  position: 0% 0%

  字体(fonts)
  字体的属性如下:
  font-style:italic;
  font-variant:small-caps;
  font-weight:bold;
  font-size:1em;
  line-height:140%;
  font-family:"Lucida Grande",sans-serif;
  可以缩写为一句:font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
  注意,如果你缩写字体定义,至少要定义font-size和font-family两个值。

  列表(lists)
  取消默认的圆点和序号可以这样写list-style:none;,
  list的属性如下:
  list-style-type:square;
  list-style-position:inside;
  list-style-image:url(image.gif);
  可以缩写为一句:list-style:square inside url(image.gif);

  1. css 字体简写规则
  当使用css定义字体时你可能会这样做:
  font-size: 1em;
  line-height: 1.5em;
  font-weight: bold;
  font-style: italic;
  font-variant: small-caps;
  font-family: verdana,serif;
  事实上你可以简写这些属性:
  font: 1em/1.5em bold italic small-caps verdana,serif
  现在好多了吧,不过有一点要注意:使用这一简写方式你至少要指定 font-size 和 font-family 属性,其他的属性(如 font-weight,font-style,font-varient)如未指定将自动使用默认值。

  2. 同时使用两个class
  通常我们只为属性指定一个class,但这并不等于你只能指定一个,实际上,你想指定多少就可以指定多少,例如:
p class="text side"... /p
  通过同时使用两个 class(使用空格而不是逗号分割),这个段落将同时应用两个 class 中制定的规则。如果两者中有任何规则重叠,那么后一个将获得实际的优先应用。

  3. css中边框(border)的默认值
  当编写一条边框的规则时,你通常会指定颜色、宽度以及样式(任何顺序均可)。例如:border: 3px solid #000(3像素宽的色实线边框),其实这个例子中唯一需要指定的值只是样式。假如你指定样式为实线(solid),那么其余的值将使用默认值:默认的宽度为中等(相当于3到4像素);默认的颜色为边框里的文字颜色。如果这正是你想要的效果,你完全可以不在css里指定。

  4. !important会被IE忽略
  在 css 中,通常最后指定的规则会获得优先权。然而对除了IE以外的浏览器来说,任何后面标有 !important 的语句将获得绝对的优先权,例如:margin-top: 3.5em !important; margin-top: 2em。
  除IE以外所有浏览器中的顶部边界都是3.5em,而IE为2em,有时候这一点很有用,尤其在使用相对边界值时(就像这个例子),可以显示出IE与其他浏览器的细微差别。(很多人可能还注意到了css的子选择器也是会被IE忽略的)

  5. 图片替换的技巧
  使用标准的html而不是图片来显示文字通常更为明智,除了加快下载还可以获得更好的可用性。但是如果你决心使用访问者的机器中可能没有的字体时,你只能选择图片。
  举例来说,你想在每一页的顶部使用“Buy widgets”的标题,但你同时又希望这是能被搜索引发现的,为了美观你使用了少见的字体那么你就得用图片来显示
  这样当然没错,但是有证据显示搜索引对真实文本的重视远超过alt文本(因为已经有太多网站使用alt文本充当关键字),因此,我们得用另一种方法:h1 span Buy widgets /span /h1 那你的漂亮字体怎么办呢?下面的css可以帮上忙:
  h1 {
  background: url(widget-image.gif) no-repeat;
  }
  h1 span {
  position: absolute;
  left:-2000px;
  }
  现在你既用上了漂亮的图片又很好的隐藏了真实文本——借助css,文本被定位于屏幕左侧-2000像素处。

  6. css盒模型hack的另一选择
  css盒模型hack被用来解决IE6之前的浏览器显示问题,IE6.0之前的版本会把某元素的边框值和填充值包含在宽度之内(而不是加在宽度值上)。例如,你可能会使用以下css来指定某个容器的尺寸:
  #box {
  width: 100px;
  border: 5px;
  padding: 20px;
  }
  然后在html中应用:div id="box"... /div,盒的总宽度在几乎所有浏览器中为150像素(100像素宽度+两条5像素的边框+两个20像素的填充),唯独在IE6之前版本的浏览器中仍然为100像素(边框值和填充值包含在宽度值中),盒模型的hack正是为了解决这一问题,但是也会带来麻烦。更简单的办法如下:
  css:
  #box {
  width: 150px;
  }
  #box div {
  border: 5px;
  padding: 20px;
  }

  html:
div id="box" div... /div /div
  这样一来在任何浏览器中盒的总宽度都将是150像素。

  7. 将块元素居中
  假设你的网站使用了固定宽度的布局,所有的内容置于屏幕中央,可以使用以下的css:
  #content {
  width: 700px;
  margin: 0 auto;
  }
  你可以把html的body之内任何项目置于中,该项目将自动获得相等的左右边界值从而保证了居中显示。不过,这在IE6之前版本的浏览器中仍然有问题,将不会居中,因此必须修改如下:
  body {
  text-align: center;
  }
  #content {
  text-align: left;
  width: 700px;
  margin: 0 auto;
  }
  对body的设定将导致主体内容居中,但是连所有的文字也居中了,这恐怕不是你想要的效果,为此#content 的div还要指定一个值:text-align: left。

  8. 使用css实现垂直居中
  垂直居中对表格来说是小菜一碟,只需指定单元格为 vertical-align: middle 即可,但这在css布局中不管用。假设你将一个导航菜单的高度设为2em,然后在css中指定垂直对齐的规则,文字还是会被排到盒的顶部,根本没有什么区别。
  要解决这一问题,只需将盒的行高设为与盒的高度相同即可,以这个例子来说,盒高2em,那么只需在css中再加入一条:line-height: 2em 就可实现垂直居中了!

  9. 容器内的css定位
  css的最大优点之一就是可以将对象定位在文档的任何位置,同样的也可以将对象在某容器内进行定位。只需要为该容器添加一条css规则:
  #container {
  position: relative;
  }
  则容器内的任何元素的定位都是相对于该容器的。假定你使用以下html结构:
  div id="container" div id="navigation" ... /div /div
  如果想将navigation定位在容器内离左边界30像素,离顶部5像素,可以使用以下css语句:
  #navigation {
  position: absolute;
  left: 30px;
  top: 5px;
  }

  10. 延伸至屏幕底部的背景色
  css的缺点之一是缺乏垂直方向的控制,从而导致了一个表格布局不会遇到的问题。假设你在页面的左侧设定了一列用于放置网站的导航。页面为白色背景,但你希望导航所在的列为蓝色背景,使用以下css即可:
  #navigation {
  background: blue;
  width: 150px;
  }
  问题在于导航项不会一直延伸到页面的底部,自然它的背景色也不会延伸到底部。于是左列的蓝色背景在页面上被半路截断,浪费了你的一番设计。怎么办呢?很不幸我们现在只能用欺骗的办法,即将body的背景指定为与左列同颜色同宽度的图片,css如下:
  body {
  background: url(blue-image.gif) 0 0 repeat-y;
  }
  背景图应为宽150像素的蓝色图片。这一办法的缺点是没法使用em来指定左列的宽度,当用户改变文字的大小导致内容的宽度扩张时,背景色的宽度不会随之改变。到写这篇文章为止这是对这类问题的唯一解决办法,因此你只能为左列使用像素值来获得能够自动延伸的不同的背景色。
常用的CSS命名规则
  (一)

  头:header
  内容:content/container
  尾:footer
  导航:nav
  侧栏:sidebar
  栏目:column
  页面外围控制整体布局宽度:wrapper
  左右中:left right center
  登录条:loginbar
  标志:logo
  广告:banner
  页面主体:main
  热点:hot
  新闻:news
  下载:download
  子导航:subnav
  菜单:menu
  子菜单:submenu
  搜索:search
  友情链接:friendlink
  页脚:footer
  版权:copyright
  滚动:scroll
  内容:content
  标签页:tab
  文章列表:list
  提示信息:msg
  小技巧:tips
  栏目标题:title
  加入:joinus
  指南:guild
  服务:service
  注册:regsiter
  状态:status
  投票:vote
  合作伙伴:partner

  (二)注释的写法:

  /* Footer */
  内容区
  /* End Footer */

  (三)id的命名:

  (1)页面结构
  容器: container
  页头:header
  内容:content/container
  页面主体:main
  页尾:footer
  导航:nav
  侧栏:sidebar
  栏目:column
  页面外围控制整体布局宽度:wrapper
  左右中:left right center

  (2)导航
  导航:nav
  主导航:mainbav
  子导航:subnav
  顶导航:topnav
  边导航:sidebar
  左导航:leftsidebar
  右导航:rightsidebar
  菜单:menu
  子菜单:submenu
  标题: title
  摘要: summary

  (3)功能
  标志:logo
  广告:banner
  登陆:login
  登录条:loginbar
  注册:regsiter
  搜索:search
  功能区:shop
  标题:title
  加入:joinus
  状态:status
  按钮:btn
  滚动:scroll
  标签页:tab
  文章列表:list
  提示信息:msg
  当前的: current
  小技巧:tips
  图标: icon
  注释:note
  指南:guild
  服务:service
  热点:hot
  新闻:news
  下载:download
  投票:vote
  合作伙伴:partner
  友情链接:link
  版权:copyright

  (四)class的命名:

  (1)颜色:使用颜色的名称或者16进制代码,如
  .red { color: red; }
  .f60 { color: #f60; }
  .ff8600 { color: #ff8600; }

  (2)字体大小,直接使用"font+字体大小"作为名称,如
  .font12px { font-size: 12px; }
  .font9pt {font-size: 9pt; }

  (3)对齐样式,使用对齐目标的英文名称,如
  .left { float:left; }
  .bottom { float:bottom; }

  (4)标题栏样式,使用"类别+功能"的方式命名,如
  .barnews { }
  .barproduct { }

  注意事项::

  1.一律小写;
  2.尽量用英文;
  3.不加中杠和下划线;
  4.尽量不缩写,除非一看就明白的单词.

  主要的 master.css
  模块 module.css
  基本共用 base.css
  布局,版面 layout.css
  主题 themes.css
  专栏 columns.css
  文字 font.css
  表单 forms.css
  补丁 mend.css
  打印 print.css
卢浮宫珍藏展--古典希腊艺术
系列<1>
2007_11_06
去首都博物馆看了卢浮宫珍藏展--古典希腊艺术
看了之后一直想写些什么
却一直没有时间
最近工作比较忙,暂时先把图片整理下吧
展馆里的光线不好,又不能用闪光灯,也没有三角架
感光度调到了400还是经常会达不到快门或光圈要求
不过,还好,出来的效果比我想象中好很多
本来都对这批照片不报希望了

IMG_0332.jpg

IMG_0333.jpg

IMG_0345.jpg

IMG_0341.jpg

IMG_0349.jpg

IMG_0354.jpg

IMG_0360.jpg

IMG_0366.jpg

IMG_0370.jpg

IMG_0372.jpg

PEEK-视觉语言设计
袁翔老师在湖南大学设计艺术学院的网站上开了一个专栏PEEK,内容是他在美国学习的设计课程情况,看了之后觉得很有用,就给袁翔老师发了mail,申请收藏了过来。
注意:
以下内容(文字、图片)版权均归袁翔老师所有,图片中的作业的版权归学生本人所有,仅供学习交流。

image002.jpg
大家好,我是袁翔老师,目前在美国辛辛那提大学设计学院(DAAP, University of Cincinnati)做访问学者。访问期间,我将在本院的网站开设一个专栏《PEEK》,并且不定期更新内容。通过这个专栏,大家将了解到DAAP设计课程的详细情况,包括教学组织形式、作品展示及师生经常关心和讨论的话题。希望这个专栏能对大家学习和从事设计有所帮助。
今天向大家介绍的是DAAP数码设计专业二年级课程《视觉语言设计》(Visual Language Design),任课教师是Oscar教授。这节课的主要内容是讨论Typography中的识别问题,即文本的变化如何影响识别。这里,Oscar教授安排了两个练习:
1、给出一张设计展海报上的文字信息(包括时间、地点、设计师、展览主题等等),让学生将这些文字布置在一张A4大小的版面上,通过调整字体、字号、反白、行距、字距、排式等方式让部分文字(重要的信息)比其他文字(次要的信息)更突出,更易识别。

反白的强调作用。同时与白也形成了地面与天空的关系。

image003.jpg


注意人名下线的分割作用以及右上角被切割的标题,虽然标题只露出了上半部分,但并不影响识别。


image004.jpg


在最近处的这张作业中,分割标题的虚线是由字母构成的。

image005.jpg


利用字体大小、粗细与字距的变化来强调/弱化不同类型的信息。

image006.jpg

image007.jpg


强调缩进的变化。

image008.jpg


综合运用。

image009.jpg


2、使用两个字符进行拼贴,也可以根据需要再附加一些简单的基本形(如矩形、圆、椭圆 、三角、五角星等),从而形成一个新的图形。然后让其他同学猜测新图形是由哪两个 字母组成,并讨论在不同尺度下(放大缩小)这两个字母中的什么因素影响了识别。

字符“2f”。这位同学试图用小写后的罗马数字II来表达2,结果引起了歧义。

image010.jpg


字符“MJ”。

image011.jpg


Ai草图。

image012.jpg

image013.jpg

image014.jpg


草图。

image015.jpg


引号与对话框。

image016.jpg


字符“Pa”。不同尺度对比。

image017.jpg


字符“U4”。请注意字符4水平方向那一横所省略的部分。

image018.jpg


字符“Pa”。两个不同的尺度对比

image019.jpg


字符“ΩQ”。

image020.jpg


Oscar教授在讲课

image021.jpg

image022.jpg

image023.jpg


在DAAP,Typography属于设计基础课程,几乎所有的设计专业都必须接受系统的Typography训练,并且主要是针对西方字符。这里老师和学生们对Typography很敏感,常常会为细处的一条曲线捉摸半天,相信与平时的这种训练分不开。虽然中文的体系结构有很大不同,但国内平面设计中大量的双语应用,也驱使我们不得不更多地了解西方的文字体系。从这一点上来看,我们遇到的挑战似乎更大,因为对于如何在同一平面上调和中西两类不同文字体系这个问题,我们只能自己探索。


袁翔老师更新日期:2007-11-02
原文地址: http://design.hnu.cn/
初学网页制作:CSS特点及加入网页的四种方法 
 CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一。使用CSS能够简化网页的格式代码,加快下载显示的速度,也减少了需要上传的代码数量,大大减少了重复劳动的工作量。尤其是当你面对的是有数百个网页的站点时,CSS简直象是神对我们的恩赐!

  前言

  CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一。

  W3C(The World Wide Web Consortium)把动态HTML(Dynamic HTML)分为三个部分来实现:脚本语言(包括JavaScript、Vbscript等)、支持动态效果的浏览器(包括Internet Explorer、Netscape Navigator等)和CSS样式表。

层叠样式表的特点

  且不说过去的网页缺少动感,就是在网页内容的排版布局上也有很多困难,如果不是专业人员或特别有耐心的人,很难让网页按自己的构思和创意来显示信息。即便是掌握了HTML语言精髓的人也要通过多次地测试,才能驾驭好这些信息的排版,过程十分漫长和痛苦。为了Internet的发展,让更多人早日踏足这个多姿多彩的世界,新的HTML辅助工具呼之欲出。
  样式表就是在这种需求下诞生的,它首先要做的是为网页上的元素精确地定位,可以让网页设计者象导演一样,轻易地控制由文字、图片组成的演员们,在网页这个舞台上按剧本要求好好地表演。
  其次,它把网页上的内容结构和格式控制相分离。浏览者想要看的是网页上的内容结构,而为了让浏览者更好地看到这些信息,就要通过格式控制来帮忙了。以前两者在网页上的分布是交错结合的,查看修改很不方便,而现在把两者分开就会大大方便网页的设计者。内容结构和格式控制相分离,使得网页可以光由内容构成,而将所有网页的格式控制指向某个CSS样式表文件。这样一来的好出表现在两个方面:
第一,简化了网页的格式代码,外部的样式表还会被浏览器保存在缓存里,加快了下载显示的速度,也减少了需要上传的代码数量(因为重复设置的格式将被只保存一次)。
第二,只要修改保存着网站格式的CSS样式表文件就可以改变整个站点的风格特色,在修改页面数量庞大的站点时,显得格外有用。避免了一个一个网页的修改,大大减少了重复劳动的工作量,当你面对的是有数百个网页的站点时,CSS简直象是神对我们的恩赐!^_^   

添加层叠样式表的方法:我们为网页添加样式表的方法有四种。
  
1.最简单的方法是直接添加在HTML的标识符(tag)里:   
< Tag style=”properties”>网页内容< /tag>   
举个例子:   
< p style=”color: blue; font-size: 10pt”>CSS实例< /p>   
代码说明:   
用蓝色显示字体大小为10pt的“CSS实例”。
尽管使用简单、显示直观,但是这种方法不怎么常用,因为这样添加无法完全发挥样式表的优势“内容结构和格式控制分别保存”。   

2.添加在HTML的头信息标识符< head>里:   
< head>   
< style type=”text/css”>   
< !-- 样式表的具体内容 -->   
< /style>   
< /head>   

type=”text/css”表示样式表采用MIME类型,帮助不支持CSS的浏览器过滤掉CSS代码,避免在浏览器面前直接以源代码的方式显示我们设置的样式表。但为了保证上述情况一定不要发生,还是有必要在样式表里加上注释标识符“< !--注释内容-->”。   

3、链接样式表   

同样是添加在HTML的头信息标识符< head>里:   
< head>   
< link rel=”stylesheet” href=”*.css” type=”text/css” media=”screen”>   
< /head>   
*.css是单独保存的样式表文件,其中不能包含< style>标识符,并且只能以css为后缀。  Media是可选的属性,表示使用样式表的网页将用什么媒体输出。
取值范围:   
·Screen(默认):输出到电脑屏幕  
·Print:输出到打印机  
·TV:输出到电视机  
·Projection:输出到投影仪  
·Aural:输出到扬声器  
·Braille:输出到凸字触觉感知设备  
·Tty:输出到电传打字机  
·All:输出到以上所有设备  
如果要输出到多种媒体,可以用逗号分隔取值表。
  
Rel属性表示样式表将以何种方式与HTML文档结合。
取值范围:   
·Stylesheet:指定一个外部的样式表  
·Alternate stylesheet:指定使用一个交互样式表   

4、联合使用样式表   

同样是添加在HTML的头信息标识符< head>里:   
< head>   
< style type=”text/css”>   
< !--   @import “*.css”   其他样式表的声明   -->   
< /style>   
< /head>   
以@import开头的联合样式表输入方法和链接样式表的方法很相似,但联合样式表输入方式更有优势。因为联合法可以在链接外部样式表的同时,针对该网页的具体情况,做出别的网页不需要的样式规则。  
需要注意的是:   
·联合法输入样式表必须以@import开头。  
·如果同时输入多个样式表有冲突的时候,将按照第一个输入的样式表对网页排版。  
·如果输入的样式表和网页里的样式规则冲突时,使用外部的样式表。
About me

8600

Author:8600
自由主义和完美主义的偏执狂……
一条矛盾的鱼.........
设计啊,设计.............
————————————————————
本博客所发表图片、文字未经允许,请勿转载,谢谢!

My World
Categories
Recent Entries
Messages


Chris's Crime
FC2 Counter

Archives
Comments
SPY
Links

Add To Friends
Friends


■ ブログ名:花月残

■ ブログ名:__左耳東風”

■ ブログ名:往日冬夏

■ ブログ名:小pea的bo

■ ブログ名:&#20781;の夢幻國都

■ ブログ名:娜娜&#21674;の永无&#23707;

■ ブログ名:on the Swing

■ ブログ名:提到独立&#39038;八荒

RSSフィード
Search

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。