《网页设计的定位》PPT课件.ppt

第 1 章 网页设计,1.1网页主题和名称 1.1.1网页主题题材的选择,图1.1 题材,设计一个站点，首先遇到的问题就是定位网站主题，如图1.1所示。,主题要简明易懂定位要小，内容要突出，如图1.2所示。,图1.2内容要突出,1.1.2 网页的名称,根据中文网站浏览者的特点，除非特定需要，网站名称最好用中文名称，不要使用英文或者中英文混合型名称。例如：责任有限公司和工作室，后者更好记。另外，网站名称的字数应该控制在7个字（最好5个字）以内，4个字的可以用成语，如“一网打进”。字数少还有个好处，一般友情链接的小logo尺寸是88MMX31MM，而六个字的宽度是78左右，适合于其他站点的链接排版，如图1.3所示。,图1.3 链接排版,1.2 定位网页形象设计,1.2.1设计网页的标志 首先需要设计制作一个网站的标志(logo)。就如同商标一样，logo是站点特色和内涵的集中体现，看见logo就让大家联想起站点。注意：这里的logo不是指88X31的小图标banner,而是网站的标志，如图1.4所示。,图1.4 网站的标志,设计网站的标准字体,标准字体和标准色彩一样，标准字体是指用于标志，标题，主菜单的特有字体。一般我们网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格，我们可以根据需要选择一些特别字体，如图1.5所示。,图1.5 特有风格,1.2.2 定位网页的版式和栏目,网站的题材确定后，就意味着已经开始收集和组织了许多相关的资料内容。因此往往会认为这些都是最好的，肯定能吸引读者来浏览网站。但是有没有将最好的，最吸引人的内容放在最突出的位置，从而使那些好内容在版面分布上占绝对优势，如图1.6所示。,图1.6 版面分布,1.3 定位网页的目录结构和链接结构,1.3.1网页的目录结构 尽量使用意义明确的目录；上面的例子中，可以用Flash、Dhtml、Javascript来建立目录，也可以用1，2，3建立目录，但是哪一个更明确，更便于记忆和管理呢？显然是前者，如图1.7所示。,图1.7 使用意义明确的目录,1.3.2 网页的链接结构,在实际的网站设计中，总是将这两种结构混合起来使用。我们希望浏览者既可以方便快速的达到自己需要的页面，又可以清晰的知道自己的位置，如图1.8所示。,图1.8 位置,1.4 网页设计的流程,1.4.1收集网页前期资料以及所需文档 网站策划人员先分析网站的目的，网站的功能、网站的定位以及初步栏目的规划描述。然后根据策划方案去收集相关资料 1.4.2策划文档及网页设计规范 将策划方案打印给小组成员人手一份，开始设计人员进行设计工作。主要设计人员进行前期的首页设计。 小组负责人确定设计进程时间并派任务单-主要设计人员开始设计-递交审核-通过后主要负责人签字,例如：某学校做站点就需要学校介绍、学校新闻、学校招生、学校形式、联系方式、留言板等几个基本单元，如图1.9所示。如果按照通常的习惯对学校介绍、学校招生、联系方式全用静态页面、而学校新闻、留言板则用动态，那么很多学校会选择学校新闻使用静态页面，理由是新闻少，没必要用动态。,图1.9 站点,1.4.3 开始制作网页,网页设计注意事项 （1）主要负责人包括所有参与网站项目的负责人，每个负责人做到审核签字。 （2）所有工作人员进行工作时必须在规定的工作时间内完成工作，不能完成工作的有权承担一定的责任。 （3）在主要负责人通过后，任何人不得以理由修改页面设计工作，特殊情况除外。 （4）网站策划人员必须及时跟踪网站建设情况并记录下来。安排任务进程。,1.5 网页设计原则,如果想成为一个网站设计者，并正想建一个网站，首先应该考虑网站的内容，包括网站功能和用户需要什么。整个设计都应该围绕这些方面来进行，如图1.10所示。 如果用户不能够迅速地进入网站，或操作不便捷，网站设计就是失败的。,图1.10 网站功能,在计算机里看起来相当好的页面，在另一个不同的平台上看起来可能非常糟糕。网站设计员使用来定义特性，这虽然允许使用特殊的字体，但是仍需要一些变通的方法，以免所选择的字体在访问者的计算机上不能显示，如图1.11所示。,图1.11 选择字体,背景颜色也会产生一些问题，可能会使网页难于阅读。应当坚持使用白色的背景和黑色的文本，另外还应当坚持使用通用字体，如图1.12所示。,图1.12 背景,在浏览器中即使去掉了图像功能，也要保证访问者能够在网站上获得良好的效果。对于那些使用ISDN连接并且关掉了图像功能的访问者，能获得好的网页加载性能。并通过在网页底部提供另外的链接和使用替代文字，来满足访问者的需要，如图1.13所示。,图1.13 文字替代图像,许多使用比较慢的计算机的访问者发现动画图标很容易耗尽系统资源，使网站的操作变得很困难，因此，应该给用户一个跳过使用Flash动画的选择。虽然许多Web设计者认为Flash功能很强大，并且Netscape5.0将支持Flash，在使用时不必再下载任何插件。但是，最好还是取消使用Flash做各接口的想法，如图1.14所示。,图1.14 Flash动画效果,为了保持小的图像，可以使用类似GIF向导的程序，它能自动对图像进行压缩 在图像显示之前最好能详细说明图像大小属性，可以在IMG标签中保存这个属性。这可以使网页显得很流畅，因为浏览器可以在图像被下载之前在屏幕上显示整个网页，如图1.15所示。,图1.15 图像大小,1.6 网页设计注意事项,如果果真有那么多的超连接必须提供给读者，不如将这些超连接以条列的方式，一笔一笔清楚地列在一选单页或目录页上，既不防碍走文的顺畅，又呈现一目了然的导览连接，如图1.14所示。,图1.14 连接,1.6.2 超连接的文字 抓住能传达主要讯息的字眼当做超连接的锚点(anchor)，可有效地控制住超连接的字串长度，避免字串过长(如整行、整句都是锚点字串)或过短(如仅一个字当做锚点)，而不利于读者的阅读或点取。 1.6.3 其他的连接 在具有前后连续顺序的文件里提供必要的连接，将篇幅过长的文件分隔成数篇较小的WebPages大大地增加了界面的亲和性，但在导览按钮与超连接的配置上，WebPage设计者则要更细心周全地安排，使得读者不论身处站台的哪一阶层，依然能够快速便捷地通往其他任何一个页面。,1.6.4 网站建设的误区,误区1. 仅仅停留在发布企业形象和产品信息上 误区之2. 在页面中塞满图片、Flash、音乐等 误区之3. 很长时间都不更新一次 误区之4. 不重视收集反馈信息，不依照反馈信息作出相应的调整 误区之5. 将宝贵的时间浪费在无益的工作上 误区之6. 高效率地管理电子邮件建立联系 误区之7.营销是成功的关键 误区之8. 理解互联网的真正威力,1.7 课后习题,1如何确定网页主题？ 2如何定位网页形象设计？ 3定位网页的目录结构？ 4网页设计的流程是什么？ 5网页设计原则是什么？ 6网页设计注意那些事项？,