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