主题:5    

2006/08/24

配色站点

本文ZT自面包树的blog^_^ 如果你是一个网站设计师,你一定经常冥思苦想如何让网站的设计更符合客户的需要?如果你是博客写手,你一定希望你的博客能给浏览者留下深刻的第一印象。这都离不开网站的外观设计,外观设计就离不开页面的配色。或许你从来没有学过配色方面的知识,但无所不能的互联网总是能提供一些工具让你变得很专业。这里推荐八个配色网站,可以让你快速地为自己的网站或博客选配一组你自己喜欢、配搭合理的颜色。有空不妨试一试,让你的网站更养眼,让你的博客更多人喜欢: .............. 阅读全文...

Jouy 发表于 2006-08-24 14:15   阅读( 362) 评论( 8) 引用( 0) Web2.0

2006/08/07

获取 Web 设计的免费资源(IBM收藏)

2006 年 7 月 31 日

Web 开发人员可以找到很多免费资源,尽管其中一些资源会比另外一些资源更加自由。如果您正在设计网站或 Web 应用程序,那么不管是静态的还是所有可以想到的动态 Ajax 内容,都能找到减轻您的劳动强度并为网站增色的资源。本文从免费图标到 Web 布局,从模板到联机网页工具,介绍了目前 Web 架构师能得到的低价或免费的帮助。

拥有大量预算作为后盾的 Web 设计人员可以获得任何所需的资源,从而可以把他们的想像力付诸于 Web 体验。他们可以聘请专业摄像师来制作引人注目的照片;可以请最好的 HTML 和 CSS 专家来创建适用于多种浏览器的复杂布局;可以指导图形艺术家根据企业服装来创作华丽的装饰物;可以聘请专业文案人员起草迷人的散文。最大的好处是,他们能 雇佣大量测试用户和关注小组来确保网站吸引人、便于使用并能按照预期进行工作。

但是,并不是所有的 Web 设计人员都这样幸运!不幸的是,有些设计人员必须用很少的钱来创建网站,并且对 Web 体验的预期并不见得很低。在这种情况下,您必须寻求一切可以获得的帮助。多半来说,Web 开发人员和设计人员在与同事共享知识和成就方面是非常慷慨的。当您共享时,同事们通常会努力地纠正并增强您的作品,使其变得更加精致、bug 更少,并会提供您自己的关注小组和质量保证。这意味着您可以找到大量免费材料。如果您知道去哪里找的话,就可以填补低预算 Web 开发运营情况下的一些漏洞。在本文中,我将介绍各类免费的 Web 资源,以及对一些貌似免费,实其不然的 Web 资源的警告。

创造性的公用

首先介绍 Creative Commons(CC),它 本身不是免费资源的来源,而是提供免费资源的人们所使用的许可证的来源。用他们自己的话说:CC 是一个非营利性组织,为创造性作品提供灵活的版权许可。您可以选择一个 CC 许可,以允许所有者要求您在使用所有者的作品或修改他们的作品时给予他们荣誉(归属条款);可以限制自己作品仅用于非营利性组织;可以要求任何对您作品所 作的更改必须在与原条款相同的条款下共享(类似共享的条款)。还有其他条款,您可以组合这些条款。例如,一个常见的 CC 许可是Attribution Share Alike 许可。

CC 已取得了巨大成功 —— 来自 CC 许可的作品主体十分庞大,并且每天都在扩大。文学、图像、音乐等作品都可以在 CC 许可下提供。只要满足限制,您可以自由地在网站上使用任何这些作品。要了解如何找到 Web 设计的任何免费产品,第一步是了解如何搜索在 CC 许可下提供的材料。您可以使用 CC 搜索引擎页面直接获得来源,这允许您利用搜索引擎(如 Google 和 Flickr)和免费资源收集(如 Flick 和 DMusic) 的专业搜索功能。

样式元素

好的样式表是好网站的骨架 —— 尤其是层叠样式表 (CSS)。不幸的是,浏览器中多变的支持意味着很难开发好的样式表。依靠免费样式表,至少是样式元素的免费模块,您可以省去大量精力和测试工作。许多站 点提供 CSS 说明和示例,但我的关注点是我找到的站点,大多数都有 CSS 材料,您可以用于快速地组装成自己的站点。有一个由顶级 Web 专业人士开办的以期刊形式出现的站点:A List Apart,着重于 Code 和 Design 主题。CSS Intensivstation Templates 专注于几个用于结构化站点的主要的布局样式。

最有名的 CSS 交换地是 CSS Zen Garden, 但您在使用此网站时必须格外小心。CSS Zen Garden 旨在展示 CSS 的强大功能。CSS 是分离内容和形式的好方法。但起初许多 Web 开发人员回避 CSS,因为他们认为如果不用传统的 HTML 技巧(如布局表格和隐藏图像),就创建不出同样令人难忘的效果。CSS Zen Garden 通过漂亮的样式证明这一认识是错误的。其中有一个单独且共享的内容片段,Web 设计人员创建了页面来以某种独特方式显示这些内容。他们使用巧妙的布局、迷人的图像和颜色,通常创作出某种主题,如大海或博物馆风格的主题。CSS Zen Garden 不能作为模板的集合。您可以在大多数 CSS 贡献中显示的警告中看到以下说明:

此设计不是模板。未经设计者的书面许可,不得复制。但是,可以随意研究 CSS 并在其他地方使用学到的技术。

此外,许多贡献者使用非免费的图像。站点维护人员请求贡献者在非商业 Creative Commons 许可下提供他们的 CSS(参见 参考资料),所以复制 CSS 通常是安全的做法,但要确保检查贡献者 CSS 文件的开头部分。


图像

专业网站会使用各种图像,从照片到艺术家的绘画到图标和符号,等等。一些站点提供免版税的图像。有一个项目值得您关注,即 Open Clip Art Library, 它是一个贡献的、可下载的剪贴画的集合。图像的范围包括从小而简单的图像到大而复杂的图像。大多数图像是可缩放矢量图形 (SVG) 格式,它是一种开放的、基于 XML 的格式。SVG 增强了对浏览器的支持,但它尚不通用,所以 Open Clip Art Library 包括每个图像的 PNG 版本。您可以浏览或搜索网站上的图像,但可能只想下载一个发行版,所以可以脱机浏览。图形的质量类似于您在商店购买的许多剪贴画集合中找到的图像的质量。 当我需要符号、图标和其他资源(如高亮显示)时,通常会浏览 Open Clip Art Library,但 MaxPower Free Icons 是一组很好的到免费图标集合的链接。说到商店里的剪贴画集合,即使已经购买,仍有许多限制。一些剪贴画需要商业使用版税。如果购买此类集合,请确保检查 End User License Agreements。

当需要照片时,我经常会访问前面提到过的 Flickr 的 CC 照片库,但是我通常是通过 Yotophoto 到达那里的,Yotophoto 是从 CC 变体到 Public Domain 的一个免费许可照片的搜索聚合地。我最喜欢的一个资源站点是 stock.xchng。此站点包括大量极高品质的照片,并有一个非常好用的搜索引擎。不是所有的照片都是免版税的,但大多数是!您甚至可以查看是否有照片的模型发行,这是决定使用包含人像的照片时要考虑的一个重要因素。一个规模较小、尚不精致,但仍十分有用的站点是 Open Photo,它只包含经 CC 许可的照片。我还使用 MorgueFile, 这个站点类似于 stock.xchng 站点,具有搜索和丰富元数据方面的类似优点。MorgueFile 上的所有图像受到专门许可(不基于 CC)的约束,但免除了个人或商业作品的版税。我喜欢 MorgueFile FAQ 中针对他们为什么提供免费图像的解答:

此网站遵循传统的万维网。它致力于倡导自由观点和交换。


设计工具

一些 Web 设计人员和公司提供联机工具来帮助其他用户并提高他们自己的社区形象。最常用的是颜色方案工具,它允许您为自己的站点选择富有美感的、令人愉快的一组颜色。在搭配颜色方面,我的确没有世上最好的眼力,所以我感谢诸如 Wellstyled.com 的 Color Scheme Generator 这样的网站。另一个提供更多有关如何组装方案的站点是 SiteProCentral.com's HTML Color Code Combination Chooser

最流行的 Web 浏览器也是最奇怪的浏览器。多年来,Web 设计人员不得不应对 Microsoft Internet Explorer 5 和 6,包括 Macintosh 和 Windows 版本之间的差异。Microsoft 正在开发 7 版浏览器,他们承诺新版本具有更好的标准兼容性,但是另一方面 Dean Edwards 已经开发了 JavaScript 解决方案。引用该网站的话:

[Dean Edwards'] IE7 是一个 JavaScript 库,使 IE 的行为像标准兼容的浏览器。它修复了许多 CSS 问题并使透明 PNG 在 IE5 和 IE6 下正常工作。

当您设计网站时,记住 Macintosh 用户是十分重要的。如果购买测试用的 Mac 机不是一个选择的话,您应感谢 Daniel Vine,因为他创建了 iCapture。您可以在此站点指定 URL、搜索看上去像 Mac 机上的 Safari Web 浏览器显示的 PNG 图像。Edwards 还提供 ieCapture,允许查看您的站点在 Macintosh IE7 beta 中的显示效果。


完全 Web 布局和模板

有时即使获得以上所有帮助,我还是不能创建引人注目的网页。我可能想要一切,幸运的是可以在一些网站中找到免费的完整页面布局,包含 HTML(经常是 XHTML)模板、图形、样式表、高亮显示等。Open Web Design 有近 2000 个各种品质的完整模板。该网站有一个评级系统,有时会进行设计人员竞赛来扩大其收集量。Open Source Web Design 是一个具有类似规模的网站。

Jouy 发表于 2006-08-07 08:31   阅读( 545) 评论( 0) 引用( 0) Web2.0

2006/08/01

RSS

如果,离开互联网半年,在这半年后不知道我们会退化到什么程度... 

无论是资讯、知识、娱乐、社交等等。我们正在逐渐依赖互联网。


RSS 的传统用途

  • 来自自定义门户(例如 Yahoo)或传统来源(例如 CNN)的新闻聚合
  • 公司新闻发布
  • 时事通讯(远离电子邮件)
  • blog 聚合(例如 InfoWorld 上 Jon Udell 的 Weblog)

RSS 的创造性新用途

  • 音乐(podcasting)、广播(NPR)和电视节目(Internet TV)。
  • 电子邮件传输(Gmail)。
  • 产品发布(Amazon.comNetFlix)。
  • 照片共享(Flickr)。
  • 社会书签(del.icio.us):找出其他人正在将什么标为书签,订阅特定个人或类别。
  • 软件更新(File of the day)。
  • 天气预报(rssweather.com)。
  • UPS、FedEx 和 USPS 包裹跟踪(Bloglines)。
  • 搜索项警报(GoogleAlert,并非附属于 Google):查看您的站点在什么时间和什么地点被讨论。
  • 股票市场和金融更新(SmartMoney)。
  • 在即将发布的 Windows Vista 和 Internet Explorer 7(它计划将 RSS 更深地内置于应用程序中,以便在不同程序之间交换信息)中,Microsoft 对 RSS 提供了强大的 支持

Jouy 发表于 2006-08-01 14:39   阅读( 596) 评论( 0) 引用( 0) Web2.0

2006/04/19

javascript 事件列表

一般事件 <转 : www.javascript.com.cn>
事件 浏览器支持 描述
onClick HTML: 2|3|3.2|4
Browser: IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击
onDblClick HTML: 2|3|3.2|4
Browser:IE4|N4|O 鼠标双击事件
onMouseDown HTML: 2|3|3.2|4
Browser:IE4|N4|O 鼠标上的按钮被按下了
onMouseUp HTML: 2|3|3.2|4
Browser:IE4|N4|O 鼠标按下后,松开时激发的事件
onMouseOver HTML: 2|3|3.2|4
Browser:IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件
onMouseMove HTML: 2|3|3.2|4
Browser:IE4|N4|O 鼠标移动时触发的事件
onMouseOut HTML: 2|3|3.2|4
Browser:IE4|N3|O3 当鼠标离开某对象范围时触发的事件
onKeyPress HTML: 2|3|3.2|4
Browser:IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]
onKeyDown HTML: 2|3|3.2|4
Browser:IE4|N4|O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]
onKeyUp HTML: 2|3|3.2|4
Browser:IE4|N4|O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]
页面相关事件
事件 浏览器支持 描述
onAbort HTML: 2|3|3.2|4
Browser:IE4|N3|O 图片在下载时被用户中断
onBeforeUnload HTML: 2|3|3.2|4
Browser:IE4|N|O 当前页面的内容将要被改变时触发的事件
onError HTML: 2|3|3.2|4
Browser:IE4|N3|O 捕抓当前页面因为某种原因而出现的错误,如脚本错误与外部数据引用的错误
onLoad HTML: 2|3|3.2|4
Browser:IE3|N2|O3 页面内空完成传送到浏览器时触发的事件,包括外部文件引入完成
onMove HTML: 2|3|3.2|4
Browser:IE|N4|O 浏览器的窗口被移动时触发的事件
onResize HTML: 2|3|3.2|4
Browser:IE4|N4|O 当浏览器的窗口大小被改变时触发的事件
onScroll HTML: 2|3|3.2|4
Browser:IE4|N|O 浏览器的滚动条位置发生变化时触发的事件
onStop HTML: 2|3|3.2|4
Browser:IE5|N|O 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断
onUnload HTML: 2|3|3.2|4
Browser:IE3|N2|O3 当前页面将被改变时触发的事件
表单相关事件
事件 浏览器支持 描述
onBlur HTML: 2|3|3.2|4
Browser:IE3|N2|O3 当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可]
onChange HTML: 2|3|3.2|4
Browser:IE3|N2|O3 当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]
onFocus HTML: 2|3|3.2|4
Browser:IE3|N2|O3 当某个元素获得焦点时触发的事件
onReset HTML: 2|3|3.2|4
Browser:IE4|N3|O3 当表单中RESET的属性被激发时触发的事件
onSubmit HTML: 2|3|3.2|4
Browser:IE3|N2|O3 一个表单被递交时触发的事件
滚动字幕事件
事件 浏览器支持 描述
onBounce HTML: 2|3|3.2|4
Browser:IE4|N|O 在Marquee内的内容移动至Marquee显示范围之外时触发的事件
onFinish HTML: 2|3|3.2|4
Browser:IE4|N|O 当Marquee元素完成需要显示的内容后触发的事件
onStart HTML: 2|3|3.2|4
Browser:IE4|N|O 当Marquee元素开始显示内容时触发的事件
编辑事件
事件 浏览器支持 描述
onBeforeCopy HTML: 2|3|3.2|4
Browser:IE5|N|O 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件
onBeforeCut HTML: 2|3|3.2|4
Browser:IE5|N|O 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发的事件
onBeforeEditFocus HTML: 2|3|3.2|4
Browser:IE5|N|O 当前元素将要进入编辑状态
onBeforePaste HTML: 2|3|3.2|4
Browser:IE5|N|O 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件
onBeforeUpdate HTML: 2|3|3.2|4
Browser:IE5|N|O 当浏览者粘贴系统剪贴板中的内容时通知目标对象
onContextMenu HTML: 2|3|3.2|4
Browser:IE5|N|O 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的<body>中加入onContentMenu="return false"就可禁止使用鼠标右键了]
onCopy HTML: 2|3|3.2|4
Browser:IE5|N|O 当页面当前的被选择内容被复制后触发的事件
onCut HTML: 2|3|3.2|4
Browser:IE5|N|O 当页面当前的被选择内容被剪切时触发的事件
onDrag HTML: 2|3|3.2|4
Browser:IE5|N|O 当某个对象被拖动时触发的事件 [活动事件]
onDragDrop HTML: 2|3|3.2|4
Browser:IE|N4|O 一个外部对象被鼠标拖进当前窗口或者帧
onDragEnd HTML: 2|3|3.2|4
Browser:IE5|N|O 当鼠标拖动结束时触发的事件,即鼠标的按钮被释放了
onDragEnter HTML: 2|3|3.2|4
Browser:IE5|N|O 当对象被鼠标拖动的对象进入其容器范围内时触发的事件
onDragLeave HTML: 2|3|3.2|4
Browser:IE5|N|O 当对象被鼠标拖动的对象离开其容器范围内时触发的事件
onDragOver HTML: 2|3|3.2|4
Browser:IE5|N|O 当某被拖动的对象在另一对象容器范围内拖动时触发的事件 [活动事件]
onDragStart HTML: 2|3|3.2|4
Browser:IE4|N|O 当某对象将被拖动时触发的事件
onDrop HTML: 2|3|3.2|4
Browser:IE5|N|O 在一个拖动过程中,释放鼠标键时触发的事件
onLoseCapture HTML: 2|3|3.2|4
Browser:IE5|N|O 当元素失去鼠标移动所形成的选择焦点时触发的事件
onPaste HTML: 2|3|3.2|4
Browser:IE5|N|O 当内容被粘贴时触发的事件
onSelect HTML: 2|3|3.2|4
Browser:IE4|N|O 当文本内容被选择时的事件
onSelectStart HTML: 2|3|3.2|4
Browser:IE4|N|O 当文本内容选择将开始发生时触发的事件
数据绑定
事件 浏览器支持 描述
onAfterUpdate HTML: 2|3|3.2|4
Browser:IE4|N|O 当数据完成由数据源到对象的传送时触发的事件
onCellChange HTML: 2|3|3.2|4
Browser:IE5|N|O 当数据来源发生变化时
onDataAvailable HTML: 2|3|3.2|4
Browser:IE4|N|O 当数据接收完成时触发事件
onDatasetChanged HTML: 2|3|3.2|4
Browser:IE4|N|O 数据在数据源发生变化时触发的事件
onDatasetComplete HTML: 2|3|3.2|4
Browser:IE4|N|O 当来子数据源的全部有效数据读取完毕时触发的事件
onErrorUpdate HTML: 2|3|3.2|4
Browser:IE4|N|O 当使用onBeforeUpdate事件触发取消了数据传送时,代替onAfterUpdate事件
onRowEnter HTML: 2|3|3.2|4
Browser:IE5|N|O 当前数据源的数据发生变化并且有新的有效数据时触发的事件
onRowExit HTML: 2|3|3.2|4
Browser:IE5|N|O 当前数据源的数据将要发生变化时触发的事件
onRowsDelete HTML: 2|3|3.2|4
Browser:IE5|N|O 当前数据记录将被删除时触发的事件
onRowsInserted HTML: 2|3|3.2|4
Browser:IE5|N|O 当前数据源将要插入新数据记录时触发的事件
外部事件
事件 浏览器支持 描述
onAfterPrint HTML: 2|3|3.2|4
Browser:IE5|N|O 当文档被打印后触发的事件
onBeforePrint HTML: 2|3|3.2|4
Browser:IE5|N|O 当文档即将打印时触发的事件
onFilterChange HTML: 2|3|3.2|4
Browser:IE4|N|O 当某个对象的滤镜效果发生变化时触发的事件
onHelp HTML: 2|3|3.2|4
Browser:IE4|N|O 当浏览者按下F1或者浏览器的帮助选择时触发的事件
onPropertyChange HTML: 2|3|3.2|4
Browser:IE5|N|O 当对象的属性之一发生变化时触发的事件
onReadyStateChange HTML: 2|3|3.2|4
Browser:IE4|N|O 当对象的初始化属性值发生变化时触发的事件

Jouy 发表于 2006-04-19 11:31   阅读( 792) 评论( 0) 引用( 0) Web2.0

web标准主题的精华贴整理

web标准主题的精华贴整理 (ajie 整理)

精品贴
31.[翻译]CSS 3.0关于布局的一些属性 (2006-04-12) - NEW -
30.[原创]条件注释理论及实践 (2006-04-10) - NEW -
29.[翻译]完全采用CSS的CROSS BROWSER TABBED PAGES (2006-03-24) - NEW -
28.学习好玩的样式的步骤(演示:放大效果) (2006-03-01) - NEW -
27.[翻译]用css制作星级评分 III (2006-03-01) - NEW -
26.[翻译]用css制作星级评分 II (2006-03-01) - NEW -
25.[翻译]用css制作星级评分 I (2006-03-01) - NEW -
24.[原创]今天试验的一种变换按钮效果。 (2006-02-20)
23.[翻译]像table一样布局div[2] (2006-02-17)
22.[翻译]像table一样布局div[1] (2006-02-17)
21.[翻译]具有亲和力的表格 (2006-02-17)
20.[原创]如何用CSS定义表格与模拟表格 (2006-02-16)
19.[翻]10个你未必知道的CSS技巧 (2006-01-28)
18.[翻]如何只使用XHTML+CSS创建一个“两步式”的相册 (2006-01-25)
17.译:CSS 3 选择器解释 (2006-01-16)
16.减少重复劳动,加快开发速度
15.【原创】与标准同行 - 2.浅谈圆角表格
14.重构之美-迎接网站标准化设计的来临
13.求救:/**/是为了兼容那个浏览器的?
12.!important和(空格)/**/:的组合技巧及其他
11.[整理]CSS书写软件集合
10.谈一下关于XHTML网页的制作
9.target="_blank"代码用CSS怎么控制的呀
8.请教:target 属性怎么用 JS 来控制?
7.在XHTML和HTML中使用语言信息
6.《CSS标准设计》系列之 CSS样式切换技巧
5.浅谈圆角表格
4.CSS书写软件集合
3.关于<li></li>排版的问题
2.你知道多少xhtml有关内容结构的标签?
1.XHTML+CSS兼容性解决方案小集


常见问题
26.如何只用css做弹出菜单呀 (2006-04-17) - NEW -
25.Opera的CSS样式过滤 (2006-02-14) - NEW -
24.关于opera解释<body>属性的一个毛病 [已解决] (2006-01-19)
24.The IE Three Pixel Text-Jog (2005/11/20)
23.Ie5、Ie5.5、Ie4、Ie3下载 已经修正可以下载
22.web标准方面的好书推荐
21.请问用web标准的话你们是整个站共用一个CSS文件吗?
20.li布局问题,苦研两天未能解决
19."设计革命之网站重构"为什么不直接过渡到xml?
18.使用框架frame符合标准吗?
17.不用表格就好吗?
16.大家在做XHTML网页的时候,都用什么工具
15.如何通过CSS去除表格默认样式的间距
14. form表单在不同浏览器中的布局显示问题
13.请问高手!如何设计整站CSS文件
12. css如何控制页面居中
11.标准缺陷?:关于css图文混排的问题
10.怎样将<form>和其它内容排在一行?
9.CSS能让一段文章只显示前200px的高度,而后面隐藏吗?
8.target 属性怎么用 JS 来控制?
7.学习层叠样式表css过程中的一个疑惑的问题(class与id的区别)
6.请问onload在XHTML用什么代替?
5.<option>中的selected不符合标准吗?
4."设计革命之网站重构"为什么不直接过渡到xml?
3.为什么我在<span>里加<h5>标题代码却通不过验证
2.求助图片链接的横向列表的问题
1.用CSS能定义出圆角的边框吗?

Jouy 发表于 2006-04-19 10:15   阅读( 688) 评论( 1) 引用( 0) Web2.0

您的浏览器可能不支持Frame, 优友地带需要使用Frame才能显示正常页面!