第八章 8.1 页面的尺寸和整体造型-高二《网页美工-网页色彩与布局设计》同步教学课件 （电子工业出版社·第2版）

Web Layout Elements 第八章 网页布局 要素 页面的尺寸 Page Size 1 页面整体造型 Page Overall Modeling 2 目 录 CONTENTS 页眉 Page Header 3 文本文字 Textual Worf 4 页脚 Page Footer 5 2 多媒体 Page Size 7 导航栏的位置 Page Overall Modeling 8 目 录 CONTENTS 网页中的交互式表单 Page Header 9 图像 Image 6 3 页面的尺寸 1 PART 4 5 页面的尺寸 Page Size 设计者在进行网页布局设计时，对网页界面的尺寸都比较迷茫，尺寸设定是进行网页设计的第一步，在Photoshop里应该设置多少像素才算合适呢？太宽就会出现水平滚动条了。宽屏、大屏已成为目前的主流，根据百度统计的分辨率使用情况中得出，从2015年5月1日到2015年10月31日共6个月的数据，如图8-1、图8-2所示，1920*1080已占使用率的第一位，由此说宽屏、大屏已成为当今用户的使用主体。 图8-1 百度统计 图8-1百度统计 8.1 页面尺寸 1.标准尺寸下的制作规划 ①在800*600分辨率的标准页面尺寸下，网页宽度应保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。  ②在1024*768分辨率的标准页面尺寸下，网页宽度保持应在1002以内，如果满框显示，则高度在612~615之间，就不会出现水平滚动条和垂直滚动条 （在dw里面有设定好的标准值， 1024*768页面的标准大小是955*600，依据该尺寸即可）。 6 页面的尺寸 Page Size 页面的尺寸 Page Size 8.1 页面尺寸Types of Web Pages 2.软件制作中的具体制作规划 ①在Photoshop中设计网页时，可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，其尺寸应设置为740*560左右。   ②在Photoshop中完成的图，其色彩在网络中会发生变化，因为Ｗeb上只用到256Web安全色，而Photoshop中的RGB或者CMYK以及LAB或者HSB的色域很宽，颜色范围很广，所以自然会有失色的现象。 7 页面整体造型 2 PART 网站风格 设计风格与品牌形象的一致性 设计风格与视觉的一致性 8 网站的设计首先要考虑整体造型的定位。任何网站都要根据主题的内容决定其风格与形式，因为只有形式与内容的完美统一，才能达到理想的宣传效果。网站的整体风格实际上是指站点的整体形象给浏览者的综合感受。 网页设计的目标是将网页和用户连结，通过设计让用户对网站产生信任。 9 页面整体造型 Page Overall Modeling 8.2.1网站风格 页面整体造型 Page Overall Modeling 风格（Style）是抽象的，而网站风格是指站点的整体形象给浏览者的综合感受。 这个“整体形象”包括站点的CI（标志、色彩、字体、标语）、版面布局、浏览方式、交互性、文字、语气、内容价值、存在意义、站点荣誉等诸多因素。大家都认为迪士尼是生动活泼的（见图8-3），IBM是专业严肃的（见图8-4），这些都是网站给人们留下的不同感受。 图8-3 迪士尼网页效果 图8-4 IBM网页效果 风格是有人性的。通过网站的外表、内容、文字、交流可以概括出一个站点的个性、情绪。是温文儒雅、是执著热情、是活泼易变、是放任不羁。像诗词中的“豪放派”和“婉约派”，完全可以用人的性格来比喻站点。如图8-5就是小清新、自然风格的网页设计，而图8-6很显然就是豪放风格的网页设计，热情、奔放，使浏览者也能透过屏幕感受到热烈的气氛。 图8-5婉约派网页效果 图8-6豪放派网页效果 11 8.2.1网站风格 页面整体造型 Page Overall Modeling 页面整体造型 Page Overall Modeling 当然设计师确认设计风格时一个不可忽略的因素就是要了解该网站的品牌形象，只有在了解二者的一致性后，才可以致力于构建页面元素之间的联系。如8-8、图8-9所示ARS网站，其设计表现给人一种严谨、一致的视觉感受，符合玛氏全球化的理念。其布局井然有序，主页面、链接页面有章可循，配色方案自成体系，交互方式统一协调，与内容深度联系——这就是一致性。 图8-8 MARS网站主页 12 图8-9 MARS网站链接页 8.2.2设计风格与品牌形象的一致性 页面整体造型 Page Overall Modeling 13 图8