Recently in Web Design Category

游毅和他的智障女儿

| | Comments (0) | TrackBacks (0)
 
文章不错,转过来,这篇文章其实是说用户UI设计的
非常恶心的弹出窗口。。似乎没有什么可以拦截。。。
 
这里涉及三个页面:
   弹窗页:1.htm  放置弹窗代码的页面
   中间页:2.htm  中间过度页面
   弹出页:3.htm  被弹出的页面

细说字体 Sans Serif 与 Serif

| | Comments (0) | TrackBacks (0)
什么是Sans Serif字体?什么是Serif字体?什么地方应该使用Sans Serif字体?什么地方又应该使用Serif字体?
这些问题,不管是对Web Designer还是普通用户,了解它我觉得还是十分必要的。
所以,请继续看吧:)

Colour Contrast Check

| | Comments (0) | TrackBacks (0)
用来校验网站颜色是否合理的页面
 

A CSS styled table

| | Comments (0) | TrackBacks (0)

Further to my article about the creation of a CSS calendar the thought crossed my mind to show you an example on how you can style a table using CSS. The data of tables can be boring so all the more reason that we need to attract attention to it and make it as pleasant to read as possible. Presentation and design with some basic accessibility rules in mind is the way to go. 

table_detail.gif

国际网页Web设计流程

| | Comments (0) | TrackBacks (0)
1.初始会商,主要是收集该站点的关键信息,包括站点的目标读者.要发布的内容.开发Web服务器平台;
 
2.概念开发,设计师根据收集的信息,开始构思,通常,设计师要把这些构思用草图的形式呈现给顾客,这个草图要有整个网站的结构,不同的布局.设计及导航;
 
3.内容综合,当决定了设计师的设计,设计师开始制作一些初始图样,这些图样用PHOTOSHOP那样的程序来创建,然后,设计师将图样打印出来配合文字;
 
4.HTML布局和导航,一旦客户同意了这些内容综合,设计师开始编制Web页面,导航器也被编制到页面中,使客户第一次真正体验一下;
 
5.图形制作,如果客户同意了站点的外观和感受,设计师将大量制作所需的图形,并进行优化;
 
6.内容流程,客户的书面材料利用各种网页技术(CSS、JAVA、FLASH),有机的和相关的图形整合在一起;
 
7.测试,在站点被提交给客户之前,设计师要彻底测试每个Web页面和联结,利用清单,进行修补;
 
8.交付,一旦签收,客户要经常进行他们的测试,找出排版和内容方面的错误,做完了这些次要的修正后,正式启用站点.
 
这套完整的计划可以用1-12个月来完成,平均完成时间为4个月.当站点启用后,要进行跟踪调查,以确定人们如何使用站点。经
 
过6-12个月的运行之后,重新收集数据,开始重新设计,然后这个Web设计过程再开始一遍

A Print CSS Primer

| | Comments (0) | TrackBacks (0)
There has always been a gaping divide between the web and print on paper. Browsers have never been able to quite get pages to print out correctly. Wide pages run off the side of the page, header elements appear comically large, words wrap incorrectly. Print stylesheets are an elegant, simple solution. They require no extra "Print this page" link, don't affect page download times, require no scripting, will work on password-protected files, and eliminate the need for duplicate print-only pages.
 
This here page is a very simple example of print stylesheets in action. This page is created using a simple, two-column tabular layout†, with a few key page elements: a title, this column (content), the column to the right (navigation), and a footer, all of which are important elements for the screen. But when you print this page out, you certainly don't need the navigation (you're not going to click on a piece of paper, duh), and here you don't need the footer.
 
To get all the pages on your site to have nice printed versions, you need to create one extra css file (I cleverly called mine print.css) and add one line of code to your html document's header:
 
<link rel="stylesheet" media="print" href="print.css" type="text/css" />
 
When a user selects the "Print" function from their web browser, your print.css file is substituted for the default stylesheet. The print.css file will be similar to your global stylesheet, but should contain the changes you wish to see on a printout. In this example, we want to remove the navigation and footer, so we add this line of code:
 
#navigation, #footer, .noprint { display: none; }
 
This line tells any html element with id="navigation" or id="footer" or class="noprint" to not show up for the printout (FYI, you get one id per document, but as many class elements as you want [reference]). This means that you could apply the class="noprint" to any part of the page you don't want to see in print. For example, the following paragraph will not show up on the printout.
 
Booger.
 
In the html for this page, the elements to be removed (corresponding with the above css) look like this:
 
<td id="navigation"> and <p class="noprint">
 
Okay. For the sake of better typography, we're also going to change the font of the main content for printout. Onscreen, I chose a sans-serif font (Verdana, Arial, Helvetica, sans-serif), but a font with serifs (Times New Roman, Garamond, serif) will look much better on paper. I also bumped the font size up to 12pt, set the text to be black on white, bumped the width of the content pane out to 100%, and removed the border, all with this simple CSS:
 
body, p, td, th, ul, a {
background-color: #fff;
color: #000;
font-family: "Times New Roman", Garamond, serif;
font-size: 12pt;
}
 
#content {
background-color: #fff;
width: 100%;
border: none;
}
 
That's all there is to it! If your browser has a "Print Preview" function, check out its results. You can also look at a version of this same page which has the screen style set to print.css.

130个css站点

| | Comments (0) | TrackBacks (0)
 
130个。。。实在太多,还是看原链接吧。。不过似乎有些就是wp。。

CSS布局

| | Comments (0) | TrackBacks (0)

css.bmp

在网上偶然找到的flash,对于查看网页配色效果

让flash通过w3c验证

| | Comments (0) | TrackBacks (0)
个人其实很讨厌flash,原因有几点:
1、flash需要安装,ie不能默认支持。而那个activex弹出和下载过程,也难以忍受,经常会让你觉得ie死掉了
2、现在的flash越来越大。虽然我们现在也是宽带,但经常会遇到一个n大的flash..n长时间下载不完。。
3、现在很多人编写的flash的代码不严格,经常会白白消耗系统资源,让cpu占有率nnn高
 
但是,有时候经常会见到不错的flash。有时想转过来,却发现会导致通不过w3c校验。昨天刚刚就找到了一个。于是,还是研究下怎么让flash的页面通过w3c吧

w3c似乎有个小小的改动

| | Comments (0) | TrackBacks (0)
似乎validator.w3.org 对于页面的校验方法,产生了一点小小的改动。
 
现在不能使用在页面中插入如下的代码来实现对当前网页的校验
 
而必须采用完整的带有网页路径的校验方法,即插入
 
 

新年了,论坛似乎都在换风格

| | Comments (0) | TrackBacks (0)
马上新年了。各大论坛都在更换新的风格来迎接新年。
不过似乎效果不怎么好。。
今天打开龙卷风,吓了一跳。。。非常恐怖的页面。。。
刺眼的红色,看起来非常恶心。。。论坛里面已经抱怨一片了。。
相比而言,se的论坛还是比较容易接受。但也有一个小问题,如果禁用了activex之后,那个x正好把登陆的位置挡住了。。
 
似乎中国在节日的时候,总是喜欢用红色来表示气氛。而红色,毕竟是一种刺眼的颜色。如果一个页面上红色太多,会让人的视觉感到很不舒服。似乎中国节日,总是和web配色有些冲突把
 
 
 
2006-01-27_11-38-10.jpg 2006-01-27_11-41-23.jpg

站点简体/繁体中文切换方法

| | Comments (0) | TrackBacks (0)
http://www.cnbruce.com/blog上看到一段可以把页面进行简体和繁体转换的代码,以后可能用到,转过来吧。

rt...
2006-01-13_15-07-21.jpg
2006-01-13_15-07-08.jpg

livid作了一个bt的单词查询

| | Comments (0) | TrackBacks (0)

任何想查的单词,只要在单词后面加上 .livid.cn 输入到浏览器地址栏中就可以翻译为中文。比如下面这些。
http://sophisticated.livid.cn/
http://superstition.livid.cn/
http://sensational.livid.cn/
任何你想得到的单词,只要后面加上 .livid.cn,就可以翻译为中文,这是我能够想到的查单词的最简单的方式了。

个人分析:这个bt男应该是在dns上加了条规则,让除www之外的所有的都指向了某个页面。然后根据页面的refer,读取到你输入的信息,进行查询。

163采用图层布局了

| | Comments (0) | TrackBacks (0)

今天打开163的首页,居然有一个广告没有被拦截,以为163采用了新的技术,就看了一下源代码。
原来163已经全部的div进行布局,靠css控制样式。而sina和sohu现在依然是采用的表格方式。
以前这3大门户,去的最多的是sina;不知不觉中,已经变成了163,而sohu似乎从没有访问过。似乎sohu的服务,都与我无关。但就新闻而言,似乎还是只看sina的,sina新闻推出了rss订阅,很是舒服

ps:广告能够弹出来,原来是我没有打开拦截探出窗口,罪过罪过

CSS陈列馆收集

| | Comments (0) | TrackBacks (0)
CSS ZenGarden:
CSS禅意花园是最富盛名的CSS设计陈列馆,Dave Shea在创办之初是为了让网页设计师通过CSS样式表针对同一个Html文件的设计不同的样式,却没想到这个项目成为了当今网页设计顶尖高手展现无穷创意的舞台,看看禅意花园的主人自己怎么说。
 
Cssvault:
Cssvault是第一个以网站缩略图的方式呈现的优秀设计的网站,而CSS陈列馆(showcase)这一说法也是由这里开始,从开始至今大约一年的时间里面,收录了大量的优秀设计,是CSS设计师必去的网站之一。
 
Web Standards Awards:
Web Standards Award,顾名思义,这里也是收集符合“网页标准”设计的网站,除收集外,还对每月收集来的网站进行评选,获胜设计可以冠以当月“网页标准”设计奖的头衔,对于设计师来说,也是一种殊荣。
 
unmatched〈style〉:
这个网站是最新出炉的一个CSS陈列馆,和前面介绍的几个网站大同小异,也是采用缩略图的方式呈现,当然每个网站收集者的审美特征都不同,多一个地方无疑也给钟情于CSS设计的朋友多了一个选择,而且他们的更新很勤快。
 
CSSBeauty:
CSSBeauty属于后起之秀,今年五月成立至今,也收录了大量的优秀站点。而与前几个网站有所不同的是,他对说收录的网站进行了分类,诸如:商业,娱乐,个人等等,使得收集的内容对访问者更有针对性。
 
The Weekly standards:
这里是我特别推荐的一个,前面的网站都收集了很多优秀的设计,符合“网页标准”,可为什么这些网站符合“网页标准”,到底这些网站好在哪里?除了外观之外,还有那些地方是需要设计者注意的?这里将带给你答案,每周一个案例分析,精彩纷呈。
 
Stylegala:
还有呢,Stylegala,也是上个月才推出的一个CSS陈列馆项目,和前面介绍的如出一辙,唯一不同的地方是访问者可以对收集其中的优秀设计进行投票。而作者对色彩搭配方面颇为敏锐,所收录的网站皆有很强的视觉效果。
 
Postearte:
不好意思,还有最后一个,既然说了是一网打尽,当然要收集得全面一些。这个网站的主人好像是欧洲人,总之他写的不是英文,看不明白。不过他自己做的Postearte这个网页本身就是一个很优秀的设计。特别是导航条,别出心裁。

IE与firefox的编码问题

| | Comments (0) | TrackBacks (0)
几天前我在页面中嵌入了一个包含google的iframe。
ie浏览的情况下,部分页面会出现frame的内容不正常,也就是表现为乱码。但frame的src的地址如果用ie打开,却可以正常显示。
而在firefox等浏览器下,确是一切正常,不会出现乱码。
我专门写了一个页面,内容非常简单,如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h3 class="entry-header">Google:</h3><br /><br />
<iframe name="GSearch" style="border: 1px solid #369;" width="600" height="300" src="http://www.google.com/search?q=分手后淫乱" scrolling="no" frameborder="0"></iframe>
</body>
</html>

这个页面在IE和firefox下浏览的情况就如下面2张图片显示的,
2006-01-02_18-59-36.jpg 2006-01-02_18-59-43.jpg
 
 
找了下原因。应该是ie对于iframe的src属性进行编码解析不正常引起的。
如果我将
src="http://www.google.com/search?q=分手后淫乱"
修改为
那么,在firefox和ie下,都将显示不正常。主要表现是
ie会把src后面的参数当成了scr的值的一部分来处理,同时又忽略中文
而firefox下则是中文部分无法显示。
 
所以,最根本的方法是对汉字进行unicode编码,然后传递给google,这样就不会出现问题了。而用html对汉字进行编码的方式,似乎还没有。
痛苦。。
 
平生一笑说自己的google帐户被封停,对google没有信心了。今天专门上去看看,呵呵,果然所有的google广告都没有了,网站干净了好多阿
不知道我给google作广告能坚持到什么时候:)

网页设计师图谱

| | Comments (0) | TrackBacks (0)

1216_16472_1xp4wq_0004.gif 1216_16477_1xp4wq_0005.gif 1216_164644_urjyrl_0001.gif 1216_164653_eb4ib5_0002.gif 1216_164658_tqiwpj_0003.gif1216_164712_sphvpi_0006.gif 1216_164716_3zr6ys_0007.gif 1216_165314_urjxqk_0000.gif 1230_123952_tqiwpj_02.jpg

太平洋改版了

| | Comments (0) | TrackBacks (0)
太平洋改版了,在firefox下浏览现在已经正常了,效果还不错:)
 
 
 
2005-12-29_10-48-00.jpg

CSS的菜单

| | Comments (0) | TrackBacks (0)
在网上看到的css的菜单。可以下载下来,研究一下。效果很好
 

移动的网站改版了。

| | Comments (0) | TrackBacks (0)
今天登陆移动检查花费,发现变成了下面的样子。原来移动对话费查询的安全性又作了一次改进。
也就是你不管干什么,都会收到验证马,然后才能进行。。
不过,我查询一个话费,收到了5条短信。。烦啊。。
 
Image00041.jpg
Image00042.jpg Image00043.jpg Image00044.jpg