网页的规划与布局ppt课件

网页的规划与布局,1,本讲内容,2,第一节 网页的组织结构,3,1、综述,网页的内容和组织取决于网站的主题和定位。确定了网站的定位和模式，就可以对网页的内容进行组织、规划和布局。,4,2、首页的结构,首页(又称主页)是网站的脸面,是企业、商家或政府机构等形象代表。首页一般包含主题、徽标、企业精神、经营理念、旗帜广告、首页链接、最新报道、联系方式、招贤纳士和栏目简介等。首页应视一件艺术品，精雕细琢，供浏览者欣赏和享用。,5,特别注意 不应该放广告，特别不能放很多。不应虎头蛇尾。不要机关重重。,6,3、一般页面的结构,一般页面也称子页面，其结构往往是依据要表现的内容而定，形式比较单一。页面的主题突出，取向性强，主要用于描述同一类事情，如图片或文字，其表现力可以弱于首页，但是风格、模式和色彩上应与首页保持一致。,7,4、网站页面的组织结构,页面的内容取决于网站的类型,而网站又是由一帧帧的页面有机组合而成。网站除了内容丰富、可读性强以外，在内容的组织上应该做到层次分明、严谨清晰。一般来说，设计网站常常采用顺序结构、层次结构、网状结构或复合结构来组织页面。,8,1 顺序结构 它适合组织一些顺序性较强的页面内容，如电子图书，产品描述等，只需要简单地按照一定的顺序浏览即可，这样的结构很象幻灯片的演示。,9,X2.HTM,X1.HTM,X HTM,10,2 层次结构 是最基本的一种网页组织形式。其优点是前后顺序清楚，关系明确。每一个页面在水平方向有极为密切的上下级关系，在竖直方向上具有并列关系。,11,12,3 网状结构 是网页之间连接灵活，是一种较为人性化的设计。,13,14,4 复合结构 在网页设计中页面之间的组织结构通常是不会采用以上单一的结构。而是使用两种或两种以上的结构，称为复合结构。,15,第二节 网页内容组织,2.1综述 建设网站的第一步是收集资料，分门别类，将这些素材合理地分配到由超级连接组织的不同的网页中，使得自己的网页能够吸引众多的浏览者，网页的内容的有效组织是必不可少的。网站的内容丰富，信息量大，应该运用一定的方式将其条理化，同时在一定程度上加以归纳重复利用，使得网页较为整齐，脉络清晰，重点突出。,16,2.2组织网页的方法 1.突出个性： 要使所设计的网页内容独特、个性鲜明，在网页的设计初期要仔细斟酌每一帧网页的性质，突出本页面的核心内容。,17,2.具有可读性： 每个网页的内容要精练，避免长篇累赘；背景颜色不可以太艳，背景图案不可以花哨，不能喧宾夺主，要与正文适当的搭配，易于阅读。,18,完整性强： 应当尽量把联系紧密的内容放在同一帧页面中，使得每一帧的内容相对较为独立，具有较好的完整性。,19,4.布局合理： 网页设计作为一种视觉语言，必定要讲究编排和布局，虽然网页设计不同平面设计，但是两者有许多相近之处，可以充分加以利用和借鉴。网页设计通过文字、图片的恰当组合，表达和谐与美，使得整体布局合理、有序，做到既丰富多样又简洁明了。可以通过视觉要素的理性分析和严格的形式构成，来提高对整体页面的把握能力和审美能力，使得页面达到最佳的视觉表现效果，较完美地体现设计者的思想和本页面的主题。,20,5.重要信息放置在首页： 眼睛是心灵的窗户。我们把报纸的最显眼的地方称报眼-报纸的眼睛。网页也是一样有最显眼的地方-此处也是应该较为重要的或是最新的内容的放在主要的地方。可以通过导航栏或将重点信息、论点等置于页面的醒目位置，还可以通过弹出窗口来发布重要要信息。,21,2.3 内容组织原则,22,首先将页面含盖内容的整体布局的需要进行分组归纳，进行内在联系的组织排列，反复推敲标题图形与整体版面的关系，创造秩序使版面各元素成为丰富多彩而简洁统一整体,当许多构成元素位于一个页面时，必须考虑浏览者的视觉中心，中心一般放在屏幕的中央，或在中间偏上的部位。这样可以突出重点，做到主次有别,较长的文章或标题，不要编排在一起，要注意安排一定的距离。对待图片的安排也是，要互相错开，大小之间要有一定的间隔，这样可以使页面错落有致，避免重心偏离形成不稳定形态。,页面有很多内容的时候很忌讳混乱，各部分内容各自为政、跨度太大，这样消弱了整体的可读性，让人抓不住核心内容。,23,2.4 内容组织,建设网站的第一步是收集资料，怎样分门别类，将这些素材合理地分配到由超链接组织起来的不同网页中，使自己的网页能吸引众多的浏览者，网页内容的有效组织是必不可少的。 网站内容丰富，信息含量大，应该运用一定的方式将其条理化，同时在一定程度上加以归纳后重复利用，使网页较为整齐，脉络清楚，读起来也有重点。如文字的合理编排，图片和文字的有机结合、前后呼应等等。 内容较少的网站虽说同样需要条理化，以达到更为富有变化和清晰的视觉效果，但相对于前者的难度将大为降低。只要安排合理，使页面达到平衡，即使在页面某处大面积留空，也不会使人感到空荡，相反会给浏览者留下一个广阔的思考空间，耐人回味。,24,25,3网页设计流程,26,内容组织,确定目标和风格,网页制作,反馈、评测,发布、推广,测试,27,1网页目标和风格,网站包含着众多内容各异，错综复杂的网页，这些网页的内容组织，材料收集和处理工作通常可以从两个方面入手。一是根据所需发布的信息确定主题，每个主题由专人负责收集相关资料和内容。二是组织、精选一些能突出本网页特色的内容，烘托和突出主题，使本页面与网站其他网页有明显的不同。,28,2 内容组织,建设网站的第一步是收集资料，怎样分门别类，将这些素材合理地分配到由超链接组织起来的不同网页中，使自己的网页能吸引众多的浏览者，网页内容的有效组织是必不可少的。 网站内容丰富，信息含量大，应该运用一定的方式将其条理化，同时在一定程度上加以归纳后重复利用，使网页较为整齐，脉络清楚，读起来也有重点。如文字的合理编排，图片和文字的有机结合、前后呼应等等。 内容较少的网站虽说同样需要条理化，以达到更为富有变化和清晰的视觉效果，但相对于前者的难度将大为降低。只要安排合理，使页面达到平衡，即使在页面某处大面积留空，也不会使人感到空荡，相反会给浏览者留下一个广阔的思考空间，耐人回味。,29,3 网页制作,网站包含着众多内容各异，错综复杂的网页，这些网页的内容组织，材料收集和处理工作通常可以从两个方面入手。一是根据所需发布的信息确定主题，每个主题由专人负责收集相关资料和内容。二是组织、精选一些能突出本网页特色的内容，烘托和突出主题，使本页面与网站其他网页有明显的不同。 除了突出主题，形成特色以外，还应该调查用户群的需求，通过了解他们的兴趣爱好、关心话题、反馈意见，不断地调整和修改网页内容，以求吸引更多的浏览者。,30,4 网页内容的组织、整理遵从原则,31,32,5 测试,当所有网站页面制作完成之后，我们需要对每一帧页面进行审查和测试，测试内容主要包括功能性测试和完整性测试两个方面。 所谓功能性测试就是要保证网页的可用性，是否达到最初的设计目标和所要表达的内容，实现所规定的功能；浏览者是否可以方便、快速地寻找到所需要的内容。完整性测试就是保证页面内容显示正确，链接准确无误，无差错无遗漏。,33,6 发布、推广,整个网站设计、测试完成以后，就可以去寻找ISP(Internet Service Provider，互联网服务提供商)，将网站的所有内容上载到互联网上。发布网站的方案有多种，其中主要采用三种方案： 虚拟主机； 主机托管； 主机租用。,34,在选择ISP时，最好还能了解ISP具有的服务能力和服务环境等内容，如：,35, 服务器的硬件配置(包括服务器的类型、CPU、硬盘速度、内存大小、网卡速度等) 服务器所在的网内环境与速度 服务器所在的网络环境与Internet骨干网相联的速率 ChinaNet的国际出口速率 ISP与ChinaNet之间的专线速率 ISP向客户端开放的端口接入速率 用户自己的计算机配置、Modem的速率、接入线路的质量等,36,上载后的网站往往希望大量的浏览者访问，提高自身的知名度，提升网站所有者的形象。我们可以尝试使用以下方法：,37, 利用传统媒体(如广告、公关文档、促售宣传等)； 像对待商标一样，将网址印制在商品的包装和宣传品上； 与其他网站交换链接或购买其他网站的图标广告； 向互联网的搜索引擎网站提交本站点的网址和关键词； 在主页面的原代码中，使用META、TITLE标识加入网站的关键词，以利识别检索； 向访问率较高的导航网站，如雅虎、搜虎等注册； 通过在网站上设立有奖竞赛的方式，提高点击率。,38,7 反馈、评测,网页设计的优劣是通过浏览者的认可而得出的，我们可以使用计数器、计时器、留言板、调查表以及有奖问答等形式收集数据，分析网站或某个网页被访问的次数或浏览者停留的时间，评测网页的设计或内容的新颖程度。 设计出达到用户目的的网页，吸引尽可能多的人参观访问是一个值得研究的课题材。一定要注重信息的调整、更新和修改，使网页内容始终处于一个不断发展，日趋完善的动态环境中。能够吸引大量的浏览者访问网站只是成功的一半，若以新奇的版式、独特的内容和服务使浏览者再度来访，或向其他人介绍网址，宣传网站的内容，才可能是真正的成功。,39,8网页设计中应注意的问题,1、有计划分阶段实施 2、网页内容组织清晰 3、链接要少而精、易于漫游 4、适当加入多媒体 5、网页内容需要不断动态更新 6、网页色彩适宜主题 7、明确标示浏览者浏览位置,40,4 网站的规划与建设,1：网站的规划 网站的主要功能是提供发布信息、收集信息的平台。因此，根据网站的主要内容及网站的目的将网站分为：企业网站（是以宣传企业形象、扩大企业影响、树立行业品牌、瞄准目标市场、突出产品特点、开发潜在的客户、增强服务品位、完善服务体系、维系客户基础为目的）、政府网站（是以宣传政府法令、法规为目的）、专业信息网站（是以提供某一专业信息作为网站内容）、商业网站（是提供商业服务为目的，提供买卖双方的商务咨询、洽谈、网上订购和支付等服务）、个人网站（是以宣传个人为主要的目的，也提供某一方面的信息或资料）。网站规划将围绕各自的目标研究制作各自的解决方案主要表现在如下各个方面：服务对象规划、目标规划、开发目标规划、网站应用规划、系统实现规划,41,2：服务对象规划 深入服务对象，确保服务对象的需求；,42,3：目标规划 它是进行网站系统创建的动力，它涉及服务分类、用户分类、安全分类等；,43,4：开发目标规划 是对实现整个目标所做出的总体实施细则和详尽的开发说明；,44,5：网站应用规划 它是指网站向用户提供的服务范围，它涉及对用户所提供的服务和对系统开发人员提供的服务；,45,6：系统实现规划 确定网站所需开发时间和所需的计算机硬件条件。,46,5网站设计,1.设计步骤 【1】对用户的需求进行分析并确定系统目标 【2】建立基础网络。涉及主干网、互联、网速、吞吐量和性能等 【3】选择网络操作系统及软件配置。协议和数据库平台 【4】提供INTERNET服务主机上安装服务软件 【5】选择主页制作工具，实现WEB与数据库的连接 【6】实现与INTERNET的连接。即建立网上环境，目前有三种方案：虚拟主机，服务器托管、专线接入。 【7】完善网站功能,47,2、站点规划：,站点栏目的规划：建设此网站是为了构架一个为企业或者某机构交流和管理的平台，经过与最终的用户的讨论达成一致：要求建立哪些栏目等做出相应详细的规划。 网站页面尺寸的规划：网站主要内容呈现区域规划在右边，占整个版面的三分之二，接近0.618的黄金比。页面左上角根据用户体验理念放置公司的标志，加深留给访问者的印象。通过设计初稿确定版面的尺寸为多少，主要动态内容呈现区域为多少等细节。 规划色调：网站选用哪种为主要色调，要求稳重还是活泼。从各种因素来考虑用色，如何就用色来达到亲和力。在背景中用色要与页面达成对比。 页面动态的规划：在开始Flash制作之前，应先在图形制作软件中设计出页面的最初形态，根据此来规划页面元素的运动路径、运动顺序等等。 程序规划：程序规划是网站的重点。通过上述的步骤规划我们将要对其实现。实现的效果也有了比较清晰的想法，那么就如何用程序实现，使用什么语言，使用哪些技巧，最重要的是在调试程序时如何避开其他的程序的干扰，也要有所考虑。,48,6 网站测试,网站设计完成后必须对其进行测试，测试分为： 【1】连通测试：首先在服务器上安装网络操作系统，启动计算机，登陆网络操作系统，进行远程访问设置，添加IP地址，TCP/IP网络设置，然后，先测试计算机到网络路由器之间的网络连接是否正常，再测试能否连通ISP的路由器，前面两项测试正常后再测试是否连接其他因特网上的主机。 【2】FTP测试：观察能否看到自己的文件及目录； 【3】网页测试：包括连接测试，外观测试，速度测试，脚本和程序测试，租用ISP硬盘空间等。,49, 本章总结,本章对网站规划管理做出了详细的说明。通过上述内容的分析，将对实现网站建设的效果有了比较清晰的想法；让我们可以深入了解不同类型的交互界面从设计到最终制作完成的整个流程，可以看出无论采用什么技术手段来完成网站的设计，最初的内容规划与设计界面初稿都是至关重要的，设计时要把设计理论融合在自己的作品中，注意总结自己的设计得失。,50,8 习题,1、网站的首页与一般页面之间的区别是什么？ 2、网站首页一般包含哪些内容？企业网站的首页主要应该突出哪些方面？ 3、网站页面采用怎样的组织结构才能对浏览者形成较强烈的视觉冲击？ 4、网状结构有何优、缺点？用什么方法解决。 5、网站的页面之间通常采用什么样的组织结构？ 6、我们通常采用什么方法组织网页的内容？,51,Thank you!,52,