86's world » 浏览器 http://blog.syx86.com My world, my dream. Mon, 23 Jan 2012 07:32:33 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 www2.seu.edu.cn UI设计分析 http://blog.syx86.com/2008/03/newpageofseu/ http://blog.syx86.com/2008/03/newpageofseu/#comments Tue, 11 Mar 2008 07:13:31 +0000 syx86 http://blog.syx86.com/?p=417 您可能也喜欢：
从www2.seu.edu.cn看meta name="Keywords"的重要性
New Homepage of SEU
HTML+CSS
看完《Css禅意花园》
syx86.cn 无觅 ]]>

应xiaoxiao师兄到要求整理了一下上周五的”第二期网页设计交流会”中讨论到的与新版校首页相关的部分，外加了（很多…）自己的意见。

页面地址: http://www2.seu.edu.cn

浏览器环境: IE 7 / Firefox 2.0.0.12 / IE 6 ()

自上而下，Banner很简洁，但是感觉有些过于简洁（与下面的图相比）。其右侧的“旧版 |
English”(图中红圈内部份)使用了11px，导致”旧版”两个字出现锯齿，如增大至12px或使用PMingLiU字体来解决，English的链接也没有加。这一块的链接最好还是用文字代替图片，否则不利于搜索引擎的分析。

www2.seu.edu.cn上半部分

Banner下面的导航栏的链接顺序比旧版首页要好，最好在后台进行一下流量分析，进一步优化调整。按钮的设计上整体感觉不错，但是建议两个按钮相接部分的细节再处理一下，另外文字及其前面的箭头在按钮上不居中也应该修正。还有一个小问题，就是应该是”虎踞龙蟠”。每个按钮下的下拉框的配色等最好能重新设计，与整体风格不是很搭配。

www2.seu.edu.cn导航栏按钮

导航栏下方的图片中的中间那一点很有味道（虽然点歪了，也不够精细），右侧边缘的那1px似乎是处理失误。

中间部分在”东大新闻”的选项卡里，所有的文章标题在50%左右的位置做了截断，但其他三个选项卡内并没有相同的处理，应统一处理方式。同时，就目前文章标题长度来看，最长的标题仅占所处容器宽度的75%，右侧部分仍显得比较空，可以考虑加上新闻发布时间进行填充。

在新闻的部分的”more”之下还有大快的空白区域，不知道设计上的用意何在？

其右侧的友情链接中图片的距离留白过大，在图片已经做过边框处理的情况下完全没有必要。而下方的下拉框及搜索的input的左侧应保持与上方图片相同的margin。另外，两个””按钮是一个比较明显的错误。

再往下，footer中还是”© 2006“，E-mail地址上最好还是加上mailto链接，后面的ICP备案也不符合信息产业部的要求。

页面整体上比旧版的一个明显不足就是在1024×768分辨率下不能显示所有内容，而第一屏之外基本没有任何有效信息。以我使用的Maxthon 2.0.8标准模式为例，第一屏的最后一行正好能显示最后一条新闻的一半，用户会习惯性的下滚但找看不到更多信息。如果能前两张图中的多余空白去掉，应该可以解决。

从代码上分析，有很多类似于<style type=“text/”><!– –></style>的冗余代码，整体上使用已经被淘汰的table布局方式导致冗余代码量的进一步增加，而<head>区的<>信息也很不完整。站内图片、css等文件引用上采用的都是绝对链接，这一点是否应该更改不好说，因为从链接上分析目录结构比较乱。另外，在</>之后还是用了一个iframe调用了一个统计文件（一开始还以为是被挂马了…）建议改用类似Google Analytics那样的js脚本形式放在</body>之前。

评论：

  • 2008/03/11/, polun writes: 老大，眼光确实敏锐。
  • 2008/03/24/, 从www2.seu.edu.cn看的重要性 | 86's world writes: [...]       大家可以先尝试一下用Google.com搜”www2.seu.edu.cn”，先是tchnorati.com抓取我BLOG上的那篇《www2.seu.edu.cn UI设计分析》，然后便是BLOG上的原文，第三位才是http://www2.seu.edu.cn。不过已经比上周搜的时候好多了，那时候搜”www2.seu.edu.cn”第一页末尾才是开始测试的通知，而这个站在搜索结果中根本看不到。而上周搜索“”的时候，排在第一位的则是新浪网关于动力楼火灾的报道（而且是有一点负面的那个版本）。如果现在搜索“ 动力楼”排在第一位的则是JunChen的那篇《【纪实】东南大学动力楼·火灾》. [...]
  • 2008/06/22/, New Homepage of SEU | 86's world writes: [...]       其实这篇blog写很久前就写完了，鉴于分析内容是SBBS美工站务的面试题一直没有发出来，今天难得早起，发一下。有兴趣的可以先看看之前的这篇《www2.seu.edu.cn UI设计分析》，里面提到的很多问题，本文中可能就不重复再讲了。 [...]
Site Meter
您可能也喜欢：

从www2.seu.edu.cn看meta name="Keywords"的重要性
New Homepage of SEU
HTML+CSS
看完《Css禅意花园》
syx86.cn
无觅
标签：, , , , , , , , , , , , , , , , , , , ,
]]> http://blog.syx86.com/2008/03/newpageofseu/feed/ 3 86的css学习笔记(一) —— 选择器 http://blog.syx86.com/2007/09/css-select/ http://blog.syx86.com/2007/09/css-select/#comments Fri, 21 Sep 2007 15:07:18 +0000 syx86 http://blog.syx86.com/?p=242 您可能也喜欢： CSS Naked Day HTML+CSS 看完《Css禅意花园》 选择幼稚 准备开始努力学习了 无觅 ]]>

选择器分四种，、、特殊选择器和属性选择器。
1.通用选择器
没啥特殊的，就是设个基准值，优先级也是最低的

  1. *{
  2. font-size:12px;
  3. }

或者选中某一标签的全部个体

  1. p{
  2. font-size:12px;
  3. }

2.一般选择器
分两种，一种是id选择器，一种是类选择器

  1. #IdName{
  2. font-size:12px;
  3. }
  4. .ClassName{
  5. font-size:12px;
  6. }

3. — 其实就是一些IE还不支持的CSS2选择器….
a.子选择器:影响容器内直接联系的子元素

  1. ul#UlName &gt; li{
  2. font-weight:bolder;
  3. }

上述代码中UlName下的li字体会加粗而li嵌套下的li则不受影响
在不完全支持CSS2的浏览器中可以如下方法实现:

  1. ul#UlName li{
  2. font-weight:bolder;
  3. }
  4. ul#UlName li *{
  5. font-weight:normal;
  6. }

相比之下子选择器是相当的节省代码量的。

b.相邻同胞选择器：就是选择容器内第一个相应标签

  1. ul#UlName + li{
  2. font-weight:bolder;
  3. }

如上，只选中该UL中第一个li，显示为粗体，而后面的li不受影响。
不过目前只能有单独的一个类来实现了….

4.
就是选中含有某属性的某一标签

  1. acronym[title]{
  2. border:1px blue solid;
  3. }

在《精通CSS》中给的例子是:

  1. a[rel="noffllow"]{
  2. background-image:url(nofollow.gif);
  3. padding-right:20px;
  4. }
  5. a[rel~="friend"]{
  6. background-image:url(friend.gif);
  7. }

在Google的PageRank评分中，带有rel=”noffllow”属性的链接将不会对目标站点的评分产生影响。
第二个里面的rel~=”friend”会寻找rel含有friend的链接，而不是完全匹配。

Site Meter
您可能也喜欢：
CSS Naked Day
HTML+CSS
看完《Css禅意花园》
选择幼稚
准备开始努力学习了
无觅
标签：, , , , , , , , , , , , , ,
]]> http://blog.syx86.com/2007/09/css-select/feed/ 0 999留念 http://blog.syx86.com/2007/04/999/ http://blog.syx86.com/2007/04/999/#comments Tue, 17 Apr 2007 06:56:00 +0000 syx86 http://blog.syx86.com/?p=198 您可能也喜欢：
[紧急通告]关于蓝色理想经典论坛无法访问的声明
Rush with the music
The Man From Earth
职业评测
被换下的两张进站 无觅 ]]>

在BBS混多了经常会发现数字的奇妙 :)  

访问

Page views

2577

 Visits

999

 Page views in last 24 hours

23

 Visits in last 24 hours

12

  •  Internet Explorer Internet Explorer 74.8%
    •  Internet Explorer Internet Explorer 6.0 64.7%
    •  Internet Explorer Internet Explorer 7.0 7.6%
    •  Internet Explorer Internet Explorer 5.5 1.0%
    •  Internet Explorer Internet Explorer 5.0 0.8%
    •  Internet Explorer Internet Explorer 5.00 0.2%
    •  Internet Explorer Internet Explorer 4.01 0.1%
    •  Internet Explorer Internet Explorer 5.01 0.1%
    •  Internet Explorer Internet Explorer 4.0 0.4%
  •   Unknown 12.1%
  •  Mozilla Firefox Mozilla Firefox 11.0%
    •  Mozilla Firefox Mozilla Firefox 2.0.0.3 5.6%
    •  Mozilla Firefox Mozilla Firefox 2.0.0.2 1.5%
    •  Mozilla Firefox Mozilla Firefox 1.5.0.4 1.5%
    •  Mozilla Firefox Mozilla Firefox 1.5.0.11 0.6%
    •  Mozilla Firefox Mozilla Firefox 1.5.0.9 0.3%
    •  Mozilla Firefox Mozilla Firefox 1.5.0.10 0.2%
    •  Mozilla Firefox Mozilla Firefox 2.0 0.8%
    •  Mozilla Firefox Mozilla Firefox 1.0 0.2%
    •  Mozilla Firefox Mozilla Firefox 2.0b1 0.1%
    •  Mozilla Firefox Mozilla Firefox 1.5.0.3 0.1%
    •  Mozilla Firefox Mozilla Firefox 1.5.0.6 0.2%
  •  Others Others 2.1%

操作系统

  •  Windows Windows 73.3%
    •  Windows Windows XP 65.9%
    •  Windows Windows Vista 2.2%
    •  Windows Windows NT 1.4%
    •  Windows Windows 2000 2.1%
    •  Windows Windows Server 2003 0.7%
    •  Windows Windows NT 4.0 0.2%
    •  Windows Windows 98 0.4%
    •  Windows Windows XP 64 bit 0.2%
    •  Windows Windows CE 0.1%
  •   Unknown 26.0%
    •   Unknown 26.0%
  •  Others Others 0.7%

国家

  • CHINA CHINA 82.04%
  • SWEDEN SWEDEN 7.66%
  • UNITED STATES UNITED STATES 5.11%
  • HONG KONG HONG KONG 1.24%
  • UKRAINE UKRAINE 0.99%
  • Others 2.97%

 

 

 

评论：

Site Meter
您可能也喜欢：

[紧急通告]关于蓝色理想经典论坛无法访问的声明
Rush with the music
The Man From Earth
职业评测
被换下的两张进站
无觅
标签：, , , , , , ,
]]> http://blog.syx86.com/2007/04/999/feed/ 2