|
|
|
网页设计：如何确定网站栏目
|
11/13/2008 2:11:35 PM
|
|
|
★★★★
|
|
运行环境：
|
视频类别：
|
下载次数：0
|
建立一个网站好比写一篇文章，首先要拟好提纲，文章才能主题明确，层次清晰。如果网站结构不清晰，目录庞杂，内容东一块西一块。结果不但浏览者看得糊涂，自己扩充和维护网站也相当困难。网站的题材确定后，并且收集和组织了许多相关的资料内容，但如何组织内容才能吸引网友们来浏览网站呢?栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。一般的网站栏目安排要注意以下几方面:
1、要紧扣主题
将你的主题按一定的方法分类并将它们作为网站的主栏目。主题栏目个数在总栏目中要占绝对优势，这样的网站显的专业，主题突出，容易给人留下深刻印象。
2、设立最近更新或网站指南栏目
设立quot;最近更新quot;的栏目，是为了照顾常来的访客，让你的主页更有人性化。如果主页内容庞大，层次较多，而又没有站内的搜索引擎，设置quot;本站指南quot;栏目，可以帮助初访者快速找到他们想要的内容。
3、设立可以双向交流的栏目
比如论坛，留言本，邮件列表等，可以让浏览者留下他们的信息。
4、设立下载或常见问题回答栏目
网络的特点是信息共享。如在你主页上设置一个资料下载栏目，便于访问者下载所需资料。另外，如果站点经常收到网友关于某方面的问题来信，最好设立一个常见问题回答的栏目，既方便了网友，也可以节约自己更多时间。
探索编辑：www.tsaqw.com
转自http://edu.itbulo.com
|
|
|
网站设计中的导航理论与实践
|
11/13/2008 12:06:18 PM
|
|
|
★★★★
|
|
运行环境：
|
视频类别：
|
下载次数：0
|
导航是科学，是艺术。它让人们从一个地方到另外一个地方。我们从家里到超市购物时，我们是在真实世界里航行。而WEB则是一个虚拟世界里。在实际生活当中人们从A点到B点，以最短的时间和距离到达目的地，这就是导航的焦点，导航就是帮助人们找到他们的路。在航行时人们经常问下面的问题:
1.我在哪?
2.我怎样才能到达我要去的地方?
3.如迷路的人经常问自己:我以前到过这里吗?或我能返回我以前某地吗?
4.还有多久时间到达那里?
等等所有的问题都是正常的，遗憾的是在WEB中很难有准确的回答。
我在哪?
由于一些设计师的疏忽，往往会将“所在位置”忘记，而使用户要知道他们自己在站点中的位置是很困难的。而URL将会给你一个精确的位置，但URL不能被大多数用户所理解，然而，也不要期望URL总能帮助人们解决我在哪的问题，目前绝大多数的网站都是通过动态产生的URL，如:http://www.52design.com/cwd/index.asp?page=2amp;sample_class=等…这不能保证用户能通过上面的URL直接知道准确的位置。因为URL显示的是位置除非你要尽力的去避免用户知道URL，或者避免深层次的链接/松散的网站架构那样，否则不要隐藏。毕竟URL能给用户一个确切的定位。
一个高级的网页标签形式加入了关于位置的许多信息，这就是我们常说的所在位置，这种类型我们也可以称深度测量，因为它直接显示了用户在站点中的位置，如下所示:
首页gt;作品展示gt;网站设计gt;作品1
注:在这种情况下，在所在位置里前面三个都可以链接，而在第四个时字体是加粗的，表明了我们现在所处的位置。这种方式能够很直接明了的提示用户我在哪?而它一般都放在主导航条的下方。
我怎样才能到达我要去的地方?
除了网址的确切定位外，用户还可以通过网页的标签用户的目的地。最明显的就是网站的主导航条了，所以我们在做导航条的时候，必须要考虑以下几个特点，1.突出/明显2.有吸引力3.扩展性也必须考虑在内，这一点是关系用和我能去哪的重要因数。当然，用户还可以通过网页中其它的小标签到达。
我以前到过这里吗?或我能返回我以前某地吗?
在网上查看信息的时候总会出现一个这样的问题，我们经常会看到重复看的信息!才发现我以前来过这里，如何有效的避免这种情况?我们可以采用颜色来区分，未被点击的是一种颜色，点击过后的又是另外一种颜色，用站点样式来实现。现在大多数网站都采用这种形式，我在这里就不多说了!
如果有完整的“所在位置”返回以前某地的问题都已经大致解决了，但一般还有几项可别忘了哟!
1.标志/LOGO
通常我们在网页的制作当中，会把LOGO做上链接链接到首页方便用户在迷失方向的时候及时的返回。如我们出外旅游时迷路了，我们可以直接回到旅馆重新开始。
2.返回
在我们阅读信息或者查看产品的时候常会看到一些莫名其妙的“返回”按钮，我都不知道它要把我返回到哪里去?如果是这样还不如不要这个按钮，让人觉得很繁琐，所以我建议有必要的多打上几个字，清晰提示用户返回到哪里，如:返回产品大厅等…
一些其它细节因数在此不一一指出了!
还有多久时间到达那里?
关于这方面的因数以下4点都可以直接影响到网页的下载速度:
1.网速
2.程序
3.服务器
4.页面的表结构
5.图片大小
6.外在其它因数
当然在前面的3点设计师无法直接有效的控制，但后第4、5点完全是设计师的控制范围之内，关于这两点我在《行业网站设计心得》一文里面已经提到，在表格方面设计师们要尽量避免使用大型表格、减少表格的深度、表格复杂化，可以直接提高网页的浏览速度。而在图片方面我就更不用多说了!
|
|
|
初学web标准的几个误区
|
11/13/2008 12:04:55 PM
|
|
|
★★★★
|
|
运行环境：
|
视频类别：
|
下载次数：0
|
非常高兴地看到很多设计师开始关注和尝试使用web标准制作网页。但从网友们的问题和制作中发现几个问题，在这里特别提醒一下：
1.不是为了通过校验才标准化。
web标准的本意是实现内容(结构)和表现分离，就是将样式剥离出来放在单独的css文件中。这样做的好处是可以分别处理内容和表现，也方便搜索和内容的再利用。
W3C校验仅仅是帮助你检查XHTML代码的书写是否规范，CSS的属性是否都在CCS2的规范内。代码的标准化仅仅是第一步，不是说通过的校验，我的网页就标准化了。我们不是为了虚名，或者向别人炫耀：“看我的页面通过了校验”而去标准化，我们的目的是为了使自己的网页设计工作更有效率，为了缩小网页尺寸，为了能够在任何浏览器和网络设备中正常浏览。
请大家沉下心来，仔细研究和理解web标准的内涵。网络上已经充满了不要浮躁和虚荣，请不要将这种风气带到web标准应用中来，这样做只会影响和损害web标准的推广。
2.不要用传统的表格思维来套div
“CSS布局就是将原来用table的地方用div来替代，原来是表格嵌套，现在是DIV嵌套。”这种观点是错误的！
请跳出原来表格布局的禁锢，抛弃一个td接一个td放置图片和内容的思维方式。我们上面说过web标准的目的是分离内容和表现，你可以这样思考，页面里有的仅仅是内容，没有修饰的情况下，它看上去就是一张白白的页面，上有一些文字和图片(这个图片是指内容中的图片，是有真实意义的图片)。这些文字图片仅仅是依次罗列下来，只有结构，没有任何样式。然后加入表现，将所有修饰的图片作为背景，用C SS来定义每一块内容的位置、字体、颜色等。
这样制作的页面才是内容与表现分离的，就是说，当你抽掉css文件，剩下的就是干净的内容。这样才能在文本浏览器中阅读，才能在手机、PDA中阅读，才能随时修改CSS实现改版。
3.不必为每块内容都建立一个id
有网友抱怨css文件太大、太复杂。仔细看他们的代码，发现原因是他们对每块内容、甚至每句话都定义一个div，建立一个ID。这一方面是对http://edu.itbulo.com/web/hc/Css/样式表</FONT></A>应用的不熟悉，另一方面也表现出对web标准没有彻底理解。
我们知道内容都是有结构的(如果不明白，请阅读：理解表现和结构相分离)相同的结构的内容我们可以用同一个样式来定义，比如相同级别的标题、正文、图片。对于多次引用的样式可以用class来定义，不需要每个都用id；另外也不是说一定要用lt;divgt;，你完全可以用lt;pgt;来代替，同样都是块级元素，一样有盒模型的七个参数，lt;divgt;仅仅方便浮动。
至于仅仅为了行高、间距、一个修饰图片而增加额外的div，我想随着对CSS的应用和理解，你很快就可以省略掉这些。我们反对用DIV的嵌套取代table的嵌套，这没有任何意义，不能体现内容的结构化。希望大家多研究CSS，写出最简练，最有效的http://edu.itbulo.com/web/hc/Css/样式表。
4.不要因为一点挫折就轻言放弃
我想这是一个态度和处事方法问题，这不仅仅针对学习web标准。学习任何新知识，接受新概念，都有困难，特别是需要你改变原来已有的习惯和思维时。唯一的问题就是：你认为学习web标准是否值得？你可以问问自己：你是否认可web标准带来的这些好处(简化代码、加速开发、压缩文件尺寸、提高下载速度、更好的易用性、获得更多用户、更易于维护、多平台兼容)？你是否觉得世界通用的XML离你还很远？你是否认为现在掌握的HTML知识就已经足够了？
自从99年以后http://edu.itbulo.com/web/网页制作技术在国内就没有怎么进步和变革过(除了flash的兴起)，而在国外前进的脚步就一直没有停止过，xhtml1.0、xhtml1.1、xml、xsl...，W3C和各大软件公司都在不断的研究和推进web技术，使它更方便、更有效、更强大。web标准的应用和推广国外已经开展了八年多(以zeldman的web标准组织网站为起点)，虽然困难重重，但正在逐步被人们接受和认可。为什么我们依然陶醉在网站表面的“繁华”上，不去思考页面背后本质的东西。
你愿意中国继续落后吗？你愿意自己继续落后吗？一切决定在于你自己。
|
|
|
网页优化之选择正确的关键词
|
11/13/2008 11:19:37 AM
|
|
|
★★★★
|
|
运行环境：
|
视频类别：
|
下载次数：0
|
如何挑选关键词是网页优化中最重要的步骤之一，同时也是多数人容易忽视的问题。人们往往随随便便想出几个关键词，将它们用在网页中，然后把这些页面提交到搜索引擎，以为就能得到好的排名。殊不知此举通常是不会为你带来理想的效果的。
在对网页进行优化前，你应该花些时间琢磨到底哪些是你需要的目标关键词或关键词组。搜索引擎绝对是重要的访问来源渠道，但要充分利用它们的优势，你必须花一些工夫。
首先要避免激进，别急于求成。坐下来，打开你最喜欢的文字编辑工具软件，再在另一个窗口中打开你的网页，从头到尾将你的网页读一遍，然后停下来思考下面的问题:
我的网页是有关哪方面的内容?
文中哪些词能够准确地描述整个网页的内容?
当某个人在搜索引擎上查找类似的信息时，他可能使用的关键词有哪些?
当你找到了答案，立刻将所想到的词或词组记录下来，然后从中挑选出最适合你的关键词。我的做法是在关键词列表中选出1- 2个中等热门关键词(因为太热门的关键词往往不容易获得好的名次)，并以该关键词为基础将网页进行重点优化，同时还把一些次要的比较冷门的关键词也用在网页中，以期在以这些不常见的关键词搜索时，我的网页也能出现在结果中。
重复以上步骤，将你网站中的各个页面都进行优化。注意要为每一个网页制订出一套独特的关键词列表。不同页面的关键词列表之间不能形成"竞争"关系，而是应该各有侧重。但这并不意味着每个页面的关键词列表必须完全不同，关键词列表之间存在某些相似之处并无大碍，但必须注意关键词列表不能100%完全相同，因为在20个搜索引擎上获得好的排位总强过在单个搜索引擎中获得20个好的排名。
好了，现在你有了一整套关键词列表，但其中可能包含一些极热门的单词，比如“MP3”、“books”或“Computers”等等。接下来要做的事是将这些热门单词打散。这听起来似乎有些残忍，但如果你是个初学者，你是根本不可能在这些关键词上获得好的名次的。即使是搜索引擎登录专家(我得说是大部分专家)也都尽量回避这些关键词，因为它们实在太热门了，有成千上万个网站都以它们作为目标关键词参与竞争，即便你的网页优化技巧再高超，你也不可能保证能够排名靠前，因此你需要将这些关键词具体化。
想想上述关键词有哪些变形形式。如果你原打算用“books”，那么改为“buy used books online”或者“antique bookste”如何?在这些词组项下取得好名次虽然也不易，但相对原来的关键词来说就容易多了。不管怎么说，以一个中等热门关键词在搜索引擎上排位前10名，要比以一个热门关键词排在第500名要好得多。
如果某个与你网站内容有关的单词经常被错拼，你也许打算用它来优化网页。但使用错拼关键词通常会影响网站的权威性。你会从一个连自己的商品名称都写不对的商家购买产品吗?我想不会。因此使用错拼单词时一定要小心。
|
|
|
定义语言编码
|
11/13/2008 11:19:05 AM
|
|
|
★★★★
|
|
运行环境：
|
视频类别：
|
下载次数：0
|
第三步是定义你的语言编码，类似这样：<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />;
为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言，我们一般使用gb2312(简体中文)，制作多国语言页面也有可能用Unicode、ISO-8859-1等，根据你的需要定义。
通常这样定义就可以了。但是要补充说明的是，XML文档并不是这样定义语言编码的，XML的定义方式如下：<?xml version="1.0" encoding="gb2312"?>;
你在Macromedia.com的首页代码第一行就可以看见类似的语句，这也是W3C推荐使用的定义方法。那为什么我们不直接采用这种方法呢？原因是一些浏览器对标准的支持不完善，不能正确理解这样的定义方法，比如IE6/windows。所以在目前过渡方案下，我们依然推荐使用meta方式。当然，你可以两种方法都写。
看本站源代码，你会发现语言编码定义的地方还多一句：<meta http-equiv="Content-Language" content="gb2312" />;
这是针对老版本浏览器写的，以保证各种浏览器都能正确解释页面。
注意：在上面声明语句的最后，你看到有一个斜杠"/"，这和我们以前的HTML4.0的代码写法不同。原因是XHTML语法规则要求所有的标识都必须有开始和结束。例如<body>;和</body>;、<p>;和</p>;等，对于不成对的标识，要求在标识最后加一个空格，然后跟一个"/"。例如<br>;写成<br />;、<img>;写成<img />;，加空格的原因是避免代码连在一起浏览器不识别。
|
|
|
学习WEB标准的重要链接大全 (二)
|
11/13/2008 11:17:08 AM
|
|
|
★★★★
|
|
运行环境：
|
视频类别：
|
下载次数：0
|
si-blog:10reasonsfwebstards SickOfWebStards
SimonWillison:TwohyFireFoxextensions
SimpleBits|AccessibleImage-TabRollovers
SimpleBits|book SimpleBits|CSSPhotoZoom
SimpleBits|MagicIconsfLazyPeople(likeme)
SimpleBits|MiniTabs SimpleBits|Mini-TabShapes
SimpleBits|SimpleQuiz SimpleBits|SimpleQuiz?PartI:Headings
SimpleBits|SimpleQuiz?PartXV:NumberedListPairs
SimpleBits|SimpleQuizArchives
SimpleBits|StardsAroundtheHouse
SimpleBits|ThisValidates! simplicity
SinelogicPress|BuildingBetter
SlidingDosofCSS-HowTo::Gdesign.it SlidingDosofCSS:AListApart SourceOrderedColumns Stardsdontnecessarilyhaveanythingtodowithbeingsemanticallycrect(kottke.g) Stevarino.com?PurpleNumbers-WPHack Stopdesign|ADesignProcessRevealed Stopdesign|MakingtheAbsoluteRelative Stopdesign|OnFixedvs.LiquidDesign Stopdesign|TheCostofPageRank Stopdesign|TheIEFact Stopdesign|TheNewBlogger StuNicholls|CuttingEdgeCSS|DoingitwithStyle StyleGuidefOnlineHypertext SuckerfishDropdowns-HTMLDog SuperRaggedFloats:evolt.gVisualDesign SuperfluousBanter:NavigationMatrix SuperfluousBanter:NavigationMatrixReloaded Survivalguidetoi18n TablesMyAss-HTMLDogBlog-HTMLDog TablesVs.CSS-AFighttotheDeath tantek.com tantek/log/2003/01 textsizing-upthegardenpath ThebenefitsofWebStardstoyourvisitsyourclientsyou Thebestwebdevelopmenttool-ever:evolt.gIA/Usability TheBoxModelProblem TheBusinessBenefitsofWebStards TheCSSVault TheLayoutReservoir-BlueRobot TheManinBluegt;WritinggterspectiveArchives thenoodleincident TheiginalproposaloftheWWWHTMLized TheTaoofWebDesign TheThrashBox?/Ugt; TheTroubleWithEM抧EN(OtherShadyCharacters):AListApart TheW3CCSSValidationService TheW3CMarkupValidationService TheWayFwardwithWebStards|Kit|maccaws.g TheWebStardsProject TheWeeklyStards TheyAreJustToolsMan?Whitespace TimBerners-Lee ToHellWithBadBrowsers:AListApart Twocolumnswithcol twothirtymediainc.-webuildwebsites.webdesignvancouverbritishcolumbiacanada UpdatedSimpleCSSTabs|silverangelabs ValidatingXHTMLwithDreamweaverMX Veerlesblog-Comments W3CHTMLHomePage WaSPearn:FAQ WaSPearn:InterviewsanCederholm WebDesignReferences WebDesignReferences:Glossary WebDeveloperExtensiononchrispederick.com WebPageDevelopment:BestPractices WebStardsAwards WebStardsGroup-TenQuestionsfDanCederholm WebStardsROI WebStardsWheredowegofromhere?Afewideas... Webestechnol贸gi谩k WelcometoBobbyWldWide WelcometoMaxDesign wg:CSSTeaserLead-inBox WhatIsWebAccessibility?:AListApart WhyDon抰YouCodefNetscape?:AListApart Whytablesflayoutisstupid:problemsdefinedsolutionsoffered Whywewon抰helpyou[diveintomark] WiredNews:BehindtheWiredNewsDesign WldWideWebConstium www.zengarden.comnbsp; XHTMLWebDesignfBeginners-Part2 YaleStyleManual-TableofContents youngpup.net-index ZeldmanesigningWithWebStards [ws]FastRolloversWithoutPreload [ws]Wellstyled.com datapark.ru
|
|
|
校验及常见错误
|
11/13/2008 11:13:54 AM
|
|
|
★★★★
|
|
运行环境：
|
视频类别：
|
下载次数：0
|
辛苦了好多天，我们努力学习使用XHTML+CSS来重新设计我们的网站。那么我们如何知道自己制作的页面真的符合web标准？W3C和一些志愿者网站提供了在线校验程序，来帮助我们检查页面是否符合标准，并提供了修正错误的帮助信息。这些校验非常有用，是我调试页面第一步要做的事情。
1.XHTML校验
校验网址：校验方式:网址校验、文件上传校验
校验成功，会显示"This Page Is Valid XHTML 1.0 Transitional!"如图：
校验失败，会显示更多校验选项和错误信息，如图：
一般选择"Show Source"和"Verbose Output"可以帮助你找到错误代码所在行和错误原因。
XHTML校验常见错误原因对照表
No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--未定义DOCTYPE。
No Character Encoding Found! Falling back to UTF-8.--未定义语言编码。
end tag f "img" omitted but OMITTAG NO was specified--图片标签没有加"/"关闭。
an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--属性值必须加引号。
element "DIV" undefined---DIV标签不能用大写，要改成小写div。
required attribute "alt" not specified---图片需要加alt属性。
required attribute "type" not specified---JS或者CSS调用的标签漏了type属性。
其中最最常见的错误就是标签的大小写问题了。通常这些错误都是关联的，比如忘记了一个lt;/ligt;其他lt;ligt;标签都会报错，所以不要看到一堆的错误害怕，通常解决了一个错误，其他的错误也都没有了。如果你的页面通过XHTML1.0校验，可以在页面上放置这么一个图标：代码如下2.CSS2校验
校验网址：http://jigsaw.w3.g/css-validat/
校验方式:网址校验、文件上传校验、直接贴入代码校验
校验成功，会显示"恭喜恭喜，此文档已经通过http://edu.itbulo.com/web/hc/Css/样式表校验! "hoho校验信息支持中文噢。如图：<IMG 校验成功信息 校验失败，会显示两类错误：错误和警告。错误表示一定要修正，否则无法通过校验；警告表示有代码不被W3C推荐建议修改。
CSS2校验常见错误原因对照表
(错误)无效数字 : col909090 不是一个 col 值 : 909090 ---十六进制颜色值必须加"#"号，即#909090
(错误)无效数字 : margin-topUnknown dimension : 6pixels ---pixels不是一个单位值，正确写法6px
(错误)属性 scrollbar-face-col 不存在 : #eeeeee --- 定义滚动条颜色是非标准的属性
(错误)值 cursh不存在 : h是非标准属性值，修改为curs:pointer
(警告)Line : 0 font-family: 建议你指定一个种类族科作为最后的选择 --W3C建议字体定义的时候，最后以一个类别的字体结束，例如"sans-serif"，以保证在不同操作系统下，网页字体都能被显示。
(警告)Line : 0 cant find the warning message f otherprofile --表示在代码中有非标准属性或值，校验程序无法判断和提供相应的警告信息。
同样，通过检验后，可以放置一个CSS校验通过图标，代码如下：
|
|
|
WEB站点开发的三部曲
|
11/13/2008 11:06:48 AM
|
|
|
★★★★
|
|
运行环境：
|
视频类别：
|
下载次数：0
|
1.1 从Internet说起
可以毫不夸张地说Internet的出现和迅速发展已经改变并将继续深刻改变我们的生活、我们生活的世界以及其他一切的一切。如今越来越多的计算机加入这个网络，时至今日谁亦无法准确地知道连接在Internet上的计算机到底有多少。而Internet成功的原因就在于它将全世界丰富多采的信息“无缝”集成并最大限度地实现了与用户交互。用户通过Internet，仿佛整个世界就在自己的计算机中:既可以查找和浏览感兴趣的任何信息，也可以把自己推向Internet，让更多的人们了解自己。事实上，Internet的繁荣除了新技术对它的支持外，从根本上得益于千千万万个信息提供者，此所谓“海不辞水，故能成其大;山不辞土石，故能成其高”。置身于浩如烟海的信息海洋中，除了想更熟练地掌握信息查询利用技巧外，作为一位未来的信息工作者，会并不仅仅满足于做信息的被动接收者，而有极其强烈的欲望想要在Internet这个开放的大舞台上拥有一个属于自己、展现自我的空间，同时也为Internet的继续繁荣贡献自己的一份心力。
1.2 关于WWW I
nternet最重要的技术是WldWideWeb，也被简称为WWW或者Web。它赋予Internet更强的生命力，因而也是目前Internet上功能最强大和增长最快的服务类型。WWW是建立在客户机/服务器模式之上的，以HTML语言和HTTP协议为基础，能够提供各种Internet服务并采用一致用户界面的应用系统。
1.3 理解Web站点
WWW上的有机细胞便是一个个Web站点，而每个Web站点在物理构成上就是一系列在内容上彼此相关、在功能上紧密集成的HTML页面的集合。WWW网上最基本的传输单位正是Web页面。WWW服务器利用超链接非线性地组织相关的多媒体信息页，这些信息既可放置在—台主机上，也可以放在不同地理位置的不同主机上;超链接由URL支持;WWW客户机则负责向服务器发送页面请求和负责如何显示页面。
2 Web站点的设计
2.1 设计原则
纵观Internet上许许多多优秀的Web站点，它们各有所长。同时也有很多共同之处，对此加以分析总结，并以此作为Web站点开发的设计原则，实在是一项事半功倍之举。现将其详述如下: (1)超媒体=多媒体+超链接:信息技术的飞速发展提供了人们更贴近现实地利用信息的可能。今天，文本、图形、图象、声频、视频等多种媒体已经全部融合在一起并实现在网络中快速地传输。同时超链接技术的产生更符合人们的非线性思维方式，使Web的使用格外方便;也是超链接，使得Web站点成为一个紧密组织的有机体，并构建起与外部的联系。超媒体实际就是多媒体与超链接的结合，因此Web站点的设计应该充分利用，发挥多媒体的亲和力和超链接的易于使用性。
(2)动态、交互性:这里所说的动态远远超过了动画、视频此类的活动含义，而是与交互紧密联系着的。传统的静态Web站点，在服务器的文件系统中存储有事先制作好的全部HTML文件，浏览器请求某页面时，服务器仅仅是检索这个页面并发送到浏览器。而动态Web站点可以根据用户的请求来动态地产生页面。CGI、ISAPI、NSAPI是目前常用的对基于服务器的功能进行这一扩充的三种方式，后来出现的ASP技术也能在Web服务器端完成类似的功能。因此一个设计得好的Web站点应充分实现与用户进行交互，即不让用户只作为被动的信息接收者，而应给他们提供有选择地接收信息甚至主动提供信息的可能。
(3)系统无关性:Web页面都是用HTML语言书写的，用户所看到的页面是浏览器对Web页面HTML文件解释显示的结果。随着HTML语言标准的升级，以及不少组织也纷纷制定自己的标准和扩展，其众多的标签与属性已提供了表现页面的越来越强大的功能，使得开发者能够尽可能随心所欲地控制页面的外观。但是理解HTML局限性是十分重要的。不同的浏览器对特定页面的显示可能会不一样，原因在于它们对HTML标准和属性的解释不一样。也就是说，NetscapeNavigat浏览器无法解释显示Microsoft的IE扩展，低版本的浏览器无法支持对HTML升级新标准的解释。自由、开放是Internet的特点，因此当我们竭力把HTML页面设计得更漂亮、更完美时，应充分考虑到让它能够在步入Web的不同的系统中都能够被查看到，那么至少应遵循两个原则:一是尽可能少地使用某组织制定的特有的HTML标准与扩展;二是充分考虑低版本浏览器、系统运行性能低的用户的存在，对他们提供向下的候选替补显示方式。
(4)不断更新:如果某Web站点的信息内容与形式长时间得不到更新，浏览者势必厌倦，对其失去兴趣。因此好的Web站点还有一个秘诀就是常换常新，永保年青。
2.2 设计步骤
一个优秀的Web站点是所提供的信息(包括单纯基于Web的内容和技术服务)的内容与形式的完美结合的典范，为此Web站点的开发大体上按下述步骤进行:
(1)信息内容的准备——根本之根本:即确定Web站点的设计方向，向外界提供哪些种类、具体什么内容的信息，并准备好相关素材。
(2)信息内容的组织——锦上添花:即对上述准备的各项素材加以组织，确定内容基础上的形式，主要包括页面之间的联系、页面的格式、布局与美化等等。
(3)技术上的实现——决定性的关键:即针对准备、组织好的信息，最后从技术上加以实现计划中的Web站点，大到全局概貌，小至各项细节乃及其他相关技术。否则，设计得再优秀的Web站点也只是海市蜃楼。
2.3 开发平台
进行设计的软硬件环境视不同设计者的设计要求、个人喜好等而不同，本人本次所实践开发的个人站点采用客户端开发形式，使用的软件工具如下:
(1)主要开发软件:MicrosoftFrontPage98。FrontPage98是帮助用户实现自动化Web站点创建、管理与发布的功能强大的软件工具。主要组成部分包括:FrontPageEdit和FrontPageExpler。Edit是一个所见即所得的HTML编辑器，无需直接编写HTML代码，不仅可直接在工作窗口中输入文本，插入图象、声音，建立超链接，插入脚本和其他对象;而且具有内嵌的浏览器，省去原来文本编辑器与浏览器之间的频繁切换，使用户可用大部分精力控制页面布局。Expler运用七种视图:文件夹视图、所有文件视图、导航视图、链接视图、链接状态、主题视图、任务视图全方位细致地对Web站点实行管理。尤其FrontPage98的功能更趋强大完善，例如一旦某文件换名、移动，系统则自动修改与此有关的链结;自动寻找孤立文件;提供专业水平的主题给用户利用，使得使用FrontPage对Web站点实行管理显得游刃有余。此外，它还包括一个支持HTTP协议和通用网关接口标准(CGI标准)的PersonalWebServer。
(2)Web发布软件:WS-FTP95—Pro。
(3)其他辅助软件:Applet HeadlineFacty2.0，VisualAppletConfiguratV1.1，Hypersnap.DX3.10.Final.Pro。
2.4 重要技术细节
(1)Java小程序(Applet):Java是一种“简单、面向对象、分布式、解释型、安全、体系结构中立、可移植、高性能、多线程和动态的”语言，可以用来编写独立的应用程序(Application)，也可以用来创建小程序(Applet)。Applet必须运行于浏览器内。目前Applet在WWW上的运用极为广泛，因为通过它可实现很多功能(诸如产生实时动画，在页面上实时运行游戏和程序，访问数据库和其他信息源，提供与用户更多的交互过程等)。在Web页面中插入Java之前，首先要由Java编译器把Applet的源代码(.java文件)编译成浏览器能识别的虚拟机字节码文件(.class文件)，然后在HTML文件中插入〈APPLET〉标记调用，客户端浏览器自服务器下载此含有Applet的页面时，若浏览器支持Java，则加以正确解释显示。
(2)脚本(Script):脚本语言的广泛使用是基于如何减轻Web服务器的负担这一出发点，因此有客户端脚本和服务器端脚本之分。使用哪一种脚本，要充分考虑保持客户端和服务器端的平衡:既要充分利用客户端的CPU，又不能让客户机承担太多的计算任务，否则它无法对用户响应。目前Web页面中可使用的脚本语言有Javascipt和Vbscript两种，通过标记嵌入使用。
(3)组件(Component):Frontpage组件是被内置于Frontpage对象中的用于作者保存一副页面或用户浏览该页时的解释执行代码，Frontpage组件可以生成HTML，在某些情况下生成服务器端和客户端代码。当页面包括的组件被浏览器捕获后或在一个表单被提交给表单处理组件时，运行组件可以动态地扩充，这和一个CGI程序在服务器上的运行相似;而创作组件只有在页面被保存时才能执行。Frontpage98中的运行组件有:ComfirmatiOnField，DefauItFmHler，Discussion，HitCounter，Registration;创作组件有:BannerAdmanager，Comment，HoverButton，IncludePage，InsertHtml，Marquee，Scheduledlmage，Scheduledlnclude，Subtitution，TableofContent，Timestamp。
(4)表单(Fm):表单是提供给用户输入信息的区域，它是Web页面和站点具有交互性特征的关键。它可把各种输入信息以各Fm元素名字-值对的形式传送给服务器端的处理程序即指定的句柄(诸如CGI等)，通过它们来处理用户请求，并动态产生HTML文件。表单在HTML文件通过 标记使用，各Fm元素包括:单行文本框Text，多行文本框Textarea，单选按钮Radio，复选框或下拉列表Slect，密码专用区域Passwd，提交按钮Submit，重置按钮Reset，提交图象Image，隐藏域Hidden。 (5)帖(Frame):帖技术将浏览器的显示窗口分为多个显示区域每个显示区域(Frame)可包含一个独立的页面。在Web页面中采用Frame，可使Web游览器中的某个显示区域的内容保持不变，同时目标区域的显示内容随着用户所选择的超链接而改变;而且便于用户了解整个页面的结构，并可以方便地在各个不同页面中转移，同时也便于站点内容的扩充与更新。
3 Web站点的管理 很多人会把Web站点的开发简单地定位成设计加开发。事实上，对Web站点的管理绝对是Web站点开发生命期中极为重要而且是不可或缺的一项工作。它主要包括发布前的测试和发布后的维护:测试的主要工作是确保Web站点预计的各项功能均得以实现;维护则涉及对现有Web站点中错误的修正、功能的完善以及其他内容的更新。如果已发布的Web站点，漏洞百出(例如存在很多断链接)，或者存在的错误长时间得不到改正，或者一张脸孔万年不变，难以想象，这样的Web站点会留得住网上冲浪者的匆匆脚步。此外管理工作还包括在线宣传自己的主页，例如通过搜索引擎注册或进行广告图案交换等等。
4 Web站点的发布 发布说到底就是将Web站点复制到ISP服务器上。如果有自己的ISP服务器，这项工作当然格外简单，否则就需要在网上寻找、选择、申请、利用免费个人主页空间，一般均采用在线申请、FTP上传方式，多数对所提供的空间有限制，有的还规定最迟更新周期。实际上传时，应充分细致了解待上传的ISP服务商对其所提供的个人主页空间的限制及附带的免费服务等才能加以充分利用，并及时解决上传过程中出现的具体问题。
5 小结 综上所述，优秀Web站点的开发必须自设计之初便严格遵循有关设计原则，并在设计过程中尽可能地获得先进Web技术的支持，无论发布前后均应实施有效管理。尤其需要指出的是:Web站点的迷人外表固然重要，但一个真正优秀的Web站点的根本魅力来自于其信息对用户的吸引，因此站点开发人员必须在信息资源的组织管理上多下功夫，不断充实自已、提高创新能力，才能成为一名网络精品信息的提供者，在Internet上永远保有自已的一份生存、发展空间。
|
|
|
如何打造实用网站？
|
11/13/2008 11:04:08 AM
|
|
|
★★★★
|
|
运行环境：
|
视频类别：
|
下载次数：0
|
遨游网络世界实在很简单，只要点选蓝色的超级链接就可以了，大家都知道怎么作。既然三岁小孩都会，那网站的可用性（Web usability）还有什么可讨论的呢？
以下这几点正是我们的答案： 1. 点选连结很简单，但要知道哪些连结 值得点可不容易。网页上的说明常常不清不楚的，让网友犹如坠入五里迷雾，不知道应该点哪里才对。
2. 现在网络上互动的技术五花八门，除了传统蓝色的超文件连结标示之外，还有Java以及动态HTML，往往让使用者更加头大。
3. 网络上的导览做得很糟糕，使用者结果会迷失在浩瀚的网络世界里，找不到自己想要的网站。
4. 不论是平面或是旧的媒体格式，网页内容都可以针对这些需求进行最佳化的安排，不过几乎没有什么网页内容能够满足上网者在在线阅读最适化的需求。
5. 电子商务交易的流程并不容易让人了解，而且也不容易完成。
6. 许多网页虽然做得相当亮丽，但是金玉其外败絮其内，使用者反而找不到需要的内容，也没有想要的交易项目。
7. 网友的整体使用体验相当不理想，尽管某些个别项目还算过得去，但是缓慢的下载过程往往令人退避三舍。
此外，以下这一点也在在的说明了为何我们需要顾虑到网页的可用性：就目前的情况来说，高达九成的商业网站都相当不实用。如果你想要找到某些数据，那么在一般的网站肯定会找不到，就算能够找到，也要经过一番辛苦奋斗。从以往的经验可以得知，网站的可用性无法一蹴可及，除非项目管理团队在网站设计过程就特别注意网站的可用性，否则结果往往令人失望。
如果高达九成的网站可用度都这么差，那么人们为什么还要上网？简单的说，剩下来一成的网站还算不错(甚至于很棒)，网络是一种使用者主导的传播媒介，人们会去自己想要造访的网站—也就是说使用者大多数的时间都是花在好的网站上，并且尽量避免制作粗糙的网站。
好消息是，既然大多数的网站都做得不好，那么你只要把网站做得容易使用，以及满足使用者的需求，那么必然能够脱颖而出，吸引庞大的人气。
提升网站使用性的方法
在这有几个简单的方法，可以提供给各位大幅提升网站的可用性。这些方法往往会有立竿见影之效，实施之初就会有相当大程度的改变。接下来的效果虽然比较不明显（因为真正的问题在一开始就已获得解决），但是仍然能够稳定的改善网站的可用度。现在网站的可用度至少还可以改善个20倍，因此就算再努力也不为过。
我们应该如何衡量网站的可用性呢？各位可以从使用者学习网站使用的速度、找到所需数据的快慢、以及达成订货之类的任务需要多久时间来衡量。如果业者能够把企业内部应用程序的训练预算砍掉一半，或是让客户加速在网站上交易的时间，那么其网站的可用性更是加倍。虽然这并不代表业者能够拿到两倍的订单，但是至少能够在其它的网站当中脱颖而出。
以下是改善网站可用性的步骤：
1. 不管你觉得旧的网站有多烂，在重新设计之前，可以针对旧版使用者做个小型的意见调查，说不定旧版网站里还是有些值得保留的特色。调查当中也能够看出来以前让使用者感到窒碍难行的问题所在，以及使用者对于网站错误的看法，对此有通盘了解之后，再重新设计也会比较容易。
2. 针对竞争对手的网站进行比较性的使用者意见调查。别的公司为了打造网站而耗费巨资，透过使用者意见调查，你可以效仿他们的长处，并且避免犯上和他们同样的错误。
3. 针对使用者进行实际的调查（field study），彻底了解他们工作环境的状况。这个步骤对于专门支持员工或是企业伙伴的企业内部网站或是企业间网站而言尤其重要。你会发现到调查结果和经理人片面告诉你的 往往 总是会有些出入。不相信吗？想想呆伯特吧。
4. 建立几个不同的设计模型，为了在最短的时间之内测试各种可能性，这些设计应该交由不同的团队来同步进行。并且针对几位使用者进行调查，从中找出最适合你的新设计。
5. 挑出最适合的设计之后，即可进一步开发，先以 HTML 作出几个雏型页面，即可邀请更多的使用者来进行测试，找出这个设计的美中不足之处。
6. 如果预算许可的话，反复多试几次：修补从测试当中发现的问题，进一步开发原型之后再进行测试。你每作一次，网站平均的可用性就可以增加38%。追求尽善尽美的过程是永无止尽的﹔我所有研究过的个案，早在达到完美的使用者接口之前，就已烧光了所有的预算。
7. 当网站建构得差不多，已经具备关键页面以及导航组件时，可以再做一次最后的测试，藉以调整商标、找出错误的讯息、以及调整互动功能的细项问题。虽然在最后的测试阶段已经无法针对最基本的问题进行改变，但是依然可以大幅提升网站的可用性。
8. 推出你刚设计好的网站。与其办个庆功派对，你不如花点心思开始规划下一次改造的设计。搜集使用者意见，分析记录文件，并且搜集其它新设计可用性有关的资料。请记住，网站永远有改善的空间，就算是新的设计也不过是下个设计的原型罢了。
使用者测试
网站可用性的改造工程通常都有使用者测试这一环，进一步的改造工程则有其它的方法可用，让我在此大胆的推荐各位参考我写的『网站可用性改造工程』(Usability Engineering)一书，里头会针对这些方法作更深层的探讨。至于消费者调查则会在接下来的专题当中加以讨论。
基本的使用者测试其实很简单。只要记住三件事件：
1. 测试的对象必须具有代表性，能够反映出你目标观众的看法。除非是企业内部网络，你才可以同侪作为测试对象，否则不要用你的同事或是任何了解这项项目的人。不过就算是企业内部网络，也应该避免以项目团队的成员作为测试对象。
2. 测试的时候，不要只是玩一玩网站接口而已，使用者应该实际执行某些工作：网站上到处点一点当然很简单，真正的考验在于网站是否能够协助使用者解决某些特定的问题。所测试的工作也必须具有代表性。
3. 避免出面干涉，让测试者自行感受，并且畅所欲言。测试的目的并非展现你有多聪明，也不是要协助使用者加速达成任务，而是希望从使用者解决问题的实际体验当中获得宝贵的意见。请记住，使用者从家里或是办公室造访你的网站时，可没有专家坐在旁边。你必须知道在实际状况下，使用者是如何使用你的网站：这表示测试者必须自行体验才行。
如果想要进行更进一步的测试，则可以采取专业的可用性实验室、在国外进行测试管理、或是眼球追踪（eye-tracking）等不同的方法。不过基本的测试方法实在很简单：也就是让具有代表性的测试人员实际处理工作，并且让这些使用者畅所欲言，发表他们实际使用的心得。
这是大家都能够作得到的测试方法，而且大家都应该这么做。如果你漏掉这个重要的步骤就匆匆推出网站，那么根本就是浪费预算，要不了多久你还是得重新设计一遍。
nbsp;
探索编辑：http://www.tsaqw.com
转自网页制作大宝库
|
|
|
五彩缤纷建网页（1）
|
11/13/2008 11:02:51 AM
|
|
|
★★★★
|
|
运行环境：
|
视频类别：
|
下载次数：0
|
|
色彩是人视觉最敏感的东西。不同色彩之间的对比会有不同的效果，当两种颜色同时在一起时，这两种色各自走向自已的极端，例如红色与绿色对比，红的更红，绿的更绿，黑色与白色对比，黑的更黑，白的更白。由于人的视觉的不同，对比的效果通常会有不同。当大家长时间的看一种纯色，例如红色，然后再看看周围的人，你会发现周围的人脸色会成绿色，正是因为红色与周围的对比，形成了对我们视觉的刺激 ! 色彩的对比会受很多因素影响，例如色彩的面积、时间、亮度等等。 色彩的对比有很多方面，色相的对比是其中的一种。比如湖蓝与深蓝对比时，你会发觉深蓝带点紫味，而湖蓝则有点绿味，各种纯色的对比会产生鲜明的色彩效果，很容易给人带来视觉与心理的满足。 色彩间的对比也有纯度对比，如黄色是夺目的色，但是加入灰色会失去其夺目的光彩。通常可以用混入黑、白、灰色来对比纯色，这样可以减低其纯度。纯度的对比会使色彩的效果更明确肯定。 主页的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总的应用原则应该是“总体协调，局部对比”，也就是：主页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。 那么如何搭配颜色才能让自己的主页更加绚丽多彩呢？我们常常遇到的问题其实主要是背景颜色和字体颜色的搭配问题：达到既不显得呆板，又不至于过于亮丽而造成过强刺激的视觉效果。
|
|