新地址：http://hi.baidu.com/andy1226

     很多朋友希望，我能把我做网站的一些流程及经验跟大家分享一下，最近刚好做一次内部培训，所以稍微整理了一下，这些只是针对网页初学者，具有一定平面设计水平的人，对HTML不是很了解，他们可能只是想做一个个人主页而已，所以整体还是趋向于传统的表格布局，这里有很多都是一些我个人刚开学时自己摸索的经验，所以可能不是很专业，但是绝对是比较容易入门的，我一直有这种思想，你只有塌进来了，你才可能往更高的地方爬，我想当初如果没有这段的学习，现在我也不会明白什么W3C，什么CSS，什么ASP，什么XML，一切都是有一个起点，希望能对大家有点小帮助。整体的PPT比较大，没有放这，我把主要内容用文字大致整理了一份，如果需要PPT，可以跟我联系。有不合理的地方，希望大家能指出，可以共同探讨一下。

主要内容介绍：

一、构成网页的基本要素
二、制作及美化的基本工具
三、网页制作的基本步骤
四、界面设计及交互研究探讨
五、实例制作演示

一.构成网页的基本要素

1.文字（标题、字号、字型...）
2 图形（网页上经常使用的图片格式：jpg、jpeg、Gif、Swf...）
3.交互功能（菜单

    不记得什么时候，我听到了这个故事：从前有座山，山上有座庙，庙里有个老和尚，在给小和尚讲故事，他说，从前有座山……

    它很简单，也许称不上什么精彩的故事，可是给我留下了很深的印象，而且听到以后再也没忘记过，你也一定知道这个故事吧？看到它，你有什么样的感觉呢？

下面我们再看另一个故事：

     Vivi（薇薇）是一个年轻活泼的女孩，平时就喜欢逛街淘衣服，把自己打扮得漂漂亮亮的，她希望把更多漂亮的衣服介绍给其他爱美的朋友，就在网上开了一个瑞丽服饰的小店，刚开始的时候很辛苦，也没有多少订单，但是Vivi一直坚持，而且她的小店物品更新快，样式新颖，服务又好，慢慢的有了回头客，生意才越来越好，她也越来越忙了，现在，她常常是每天早上先查银行的付款记录，然后要去查找是哪些顾客付的款，根据订单内容准备发货，如果有不清楚的地方，她会通过手机/email/QQ/MSN和朋友们沟通。因为银行的付款记录上信息很少，为了弄清楚到底是哪些订单已经付款，Vivi常常要花很多时间进行询问和核对，为了减少麻烦，她还在网站上特地贴出通知，让大家付款的时候多打几分钱，并且在付

     界面设计(UI Design)，交互设计(interactive design)，可用性研究(usability research)，人力因素(human factors)，信息结构工程师(information architect)

     在美国，这些工作职位的区分并不是很容易。也许不同的公司有不同的职位名称和工作重点，但是有一点可以肯定，他们设计的产品与人类都有有强烈的互动性。

     在与国内同行探讨中，不止一次有朋友将自己的设计作品Email过来，希望得到我的意见。打开Email，看到的只是一个截图(Screenshot),就有些纳闷，UI设计怎么能用静态的图像来表现呢？虽然我也接受过一些正式的色彩和Layout训练，可是凭心而论，可能我没有什么资格对那些作品发表评论，因为他们的确色彩搭配赏心悦目，Layout结构合理，个人风格突出，我只能说，朋友，GoodJob,但是你错过了UI设计中最重要的部分。UI设计不只是给人提供视觉上的享受，真正UI设计的好坏，必须要设定一个任务，从头至尾使用一遍才能知道。 UI的概念是动态的过程，是逻辑的推理，也是各种状况的预测。如果衡量UI设计只有一种标准，那就是用户体验(User Experi

      第二届“网侠会”在5月24日在杭州开幕，此次大会以“开放·分享”为主题，共同探讨互

联网技术的创新、发展，预测未来的技术发展趋势。而我则是一个不懂网络工程的小小设计师

，但是很想知道工程师们的领域是什么样的；为什么很多时候设计师和工程师之间合作会有这

么那么的问题；世界移动互联网的未来是怎么样的；于是，我就抱着这三个问题，滥竽充数的

样子，参加完这次“侠客大会”。

     虽然这次是技术分享，他们所讲到的技术并不是很多，上午在'侠客岛'上，互联网的领导和

国内外的领军人物，展示了世界最先进的技术，带给我们很多信息，很大程度上拓宽了我们的

眼界。

     首先出场的当然是领导，他们口中所讲到的互

     长期以来我们已经习惯了“使用”这个词，使用某种工具，使用某个软件，人类对产品的使用，很好理解。

     可是，我们现在为什么要提到“交互”这个词呢？因为“使用”，是一种从人类出发的主动语态，说到使用，自然就想到以人类为主导，使用对象为辅助的一种关系。

提到“交互”，感觉是参与交互的双方更加对等，实际上，引入“交互”这个词的意义，就在于交互对象地位的提升。来自《超越人机交互》一书Terry Winograd先生说：“……也就是把计算的长处和人的长处相结合，而不是让计算机模拟人，正是这个想法把我引入了HCI领域”；Alan Cooper先生在UIDesign的访谈中也同样提到：“关键在于，让人去做他胜任的事情是一件非常好的事。让人做人擅长做的事情，而让计算机做计算机真正擅长的事情。”对交互对象的重视有利于让人和交互对象的关系更合理，从而得到人和交互对象相得益彰的相处方式。

     可用性(usability)是交互设计的基本而且重要的指标，它是对可用程度的总体评价。也是从用户角度衡量产品是否有效、易学

    回到前面vivi使用电话银行系统的例子，这样一个交互过程有缺乏设计的嫌疑，vivi为了查询到自己工资卡里的余额，一共需要九次按键，花费大约2分钟时间，其中大部分时间在各种名目的毫不关心的语音菜单之间选择，何况查询余额又是一个如此基本的操作。而就在此刻，数以亿计的产品正在和用户交互。

    如果用战场作比喻，那么产品就处在和用户接触的最前线，最深刻、最具体的体验就在产品和用户之间展开。

    拙劣的交互一定可以打败用户：

“确实要删除吗？是，否”一个熟练的用户受到了伤害，“我都已经删了几百次了，每次都这样问我”。

“无效的操作”“您带的资料不合格，请备齐资料，下次再来。”你好不容易请了半天假，排了两个小时队，把材料递上去，却得到这样的回复，意味着一切都要重新来过，包括手工填写那张有几十个框框的表格，而仅仅因为要换一个日期。

    在这种情况下，用户受到的挫折和打击只会让他们越来越逃避和这样的产品交互。

    反过来，良好的交互可以赢得用户的喜欢和信赖：

“这个软件真是太好了，现在