04 网站与网页的设计

第4章网站与网页的设计中国人民大学王蓉大纲4.1网站欣赏4.2设计原则4.3确定内容4.4网页布局中国人民大学王蓉4.1网站欣赏通过实例对网站的布局、色彩、LOGO、导航栏、文字等内容有个感性认识网上资源:中国企业港网站建设中心案例展示海硅科技(成功案例)网站设计欣赏中国人民大学王蓉实例——学校中国大学清华北大人大复旦大学文史研究院南京大学中山大学外国大学YaleHarvardOxfordCambridgeMIT网站欣赏中国人民大学王蓉实例——学校4.1网站欣赏与人大、北大比较中国人民大学王蓉实例——学校网站欣赏中国人民大学王蓉实例——公司国内公司联想海尔当当淘宝国外公司IBMNestleCliniqueAdidasAmazon网站欣赏中国人民大学王蓉实例——公司年的访问页面中国人民大学王蓉实例——公司网站欣赏中国人民大学王蓉实例——公司网站欣赏中国人民大学王蓉实例——人文网站欣赏参见美术馆中国人民大学王蓉实例——人文网站欣赏中国人民大学王蓉实例——个人主页中国个人网站排名榜网站欣赏中国人民大学王蓉4.2总体设计原则统一所有的元素都应该为一个共同的主题服务，具有整体效果在所有的原则中是最为重要的。连贯利用各组成部分在内容上的内在联系和表现形式上的相互呼应，并注意整个页面设计风格的一致性整齐对比强调突出某些内容的最有效的办法之一协调整个页面符合美的法则，各个部分都非常匀称中国人民大学王蓉4.2总体设计原则参考网站建设的基本原则恒安网络给网站开发和设计者的10点建议中国人民大学王蓉4.3确定内容Web站点的定位Web站点可分为商业型、娱乐型、文化型、教育型、综合型、行业型、区域型等各种类型的站点又可细分为不同层次的专题，如政治、军事、科技、医疗等根据自身Web站点的类型和服务对象进行设计定位，才能有的放矢，在设计方面尽力做到合理。明确主题划分栏目将主题按一定的方法分类，并将它们作为网站的主栏目中国人民大学王蓉4.4网页布局页面尺寸基本组件基本原则常见布局结构布局方法布局技术网页布局是对页面的版面设计中国人民大学王蓉页面尺寸由于网页最终显示在显示器上，网页大小要符合显示器的大小及分辨率4.4网页布局分辨率页面尺寸800×600780×428778×4281024×7681007×6001003×599除去浏览器占去的空间当浏览网页时不要出现水平方向的滚动条中国人民大学王蓉基本元素页头又称为页眉，其作用是定义页面的主题常放置站点名字、图片、公司标志（LOGO）以及旗帜广告等页脚与页头相呼应。放置制作者、友情链接、公司联系方式和版权信息等文字4.4网页布局中国人民大学王蓉基本元素4.4网页布局中国人民大学王蓉基本元素4.4网页布局Logo及公司名称横幅广告导航栏中国人民大学王蓉基本元素LOGO设计标志和门牌唯一一个必须以图片形式出现的页面元素一般放在网页的左上角国际标准88×31：最普遍的LOGO规格120×60：用于一般大小的LOGO120×90：用于大型LOGO4.4网页布局中国人民大学王蓉基本元素导航设计网站设计不可缺少的要素帮助读者理解他们在哪里和去哪里4.4网页布局中国人民大学王蓉基本原则反差重复排列分类4.4网页布局请参考：美观整洁的网页设计4原则中国人民大学王蓉基本原则反差重复排列分类4.4网页布局这个网页利用一张大图片来吸引用户的注意。而同时网页很自然的单色又让很少的蓝色应用有了更好的效果。中国人民大学王蓉基本原则反差重复排列分类4.4网页布局当你眼睛看到这个页面的时候，你会首先注意到什么？中国人民大学王蓉基本原则反差重复排列分类4.4网页布局大大的黄色头部和小小的淡灰文字中国人民大学王蓉基本原则反差重复排列分类4.4网页布局在头部和脚部都使用了很有创意的插画。中国人民大学王蓉基本原则反差重复排列分类4.4网页布局它的版面排列很连贯也很引人注目中国人民大学王蓉基本原则反差重复排列分类4.4网页布局AListApart中使用的可视格栏非常有特色。里面的栏目设计良好，把所有包含内容都变得易于阅读。研究表明过宽的栏目会造成严重的阅读困难。中国人民大学王蓉基本原则反差重复排列分类4.4网页布局这个网站漂亮地将内容规整地组织到三个主要分类下，这些内容的定义既清晰又规整。中国人民大学王蓉常见布局结构分栏式区域划分无规律式“国”字型“厂”字型框架型左右型上下型混合型封面型Flash型布局4.4网页布局另一种划分方法中国人民大学王蓉常见布局结构分栏式最常见的网页框架把页页从上到下分割为几列构架的设计4.4网页布局全球著名视觉杂志《I.D.》设计十分简洁，使用直线划分页面中国人民大学王蓉常见布局结构分栏式4.4网页布局中国人民大学王蓉常见布局结构区域划分用辅助线、图形和色彩把网页平面分为几个区域这些区域可以规则的，也可以是不规则的4.4网页布局中国人民大学王蓉常见布局结构区域划分比分栏结构更加灵活可以适应多种信息内容编排的需求4.4网页布局在线游戏网站playdo中国人民大学王蓉常见布局结构无规律式主要以整张图片的网页设计为主类似大海报但占用图片多，下载速度慢4.4网页布局Huaxutex.cn中国人民大学王蓉常见布局结构无规律式4.4网页布局Ridesnowboards.comHighctr.com中国人民大学王蓉布局方法通常，创建Web站点并不是以打开Dreamweaver并立即对页面进行布局开始的。创建Web站点的初始工作从纸张或图形编辑应用程序（如MacromediaFireworks）开始。图形设计人员通常会画出Web站点综合图形的草图（也称为“草样”），以便向客户展示并确保站点的初始构思能让客户满意。4.4网页布局中国人民大学王蓉布局方法纸质布局在纸上画出页面的布局草图帮助将许多不确定的思想确定下来软件布局用图像编辑软件，如Photoshop、Fireworks等帮助设计者将自己的设想实现到图纸上4.4网页布局中国人民大学王蓉例：用Fireworks帮助创建网页模型背景描述CaféTownsend是一家虚构的餐厅，它雇用您的团队设计并建立他们的网站。在项目的早期规划阶段，您的团队成员与CafeTownsend代表共同探讨了有关此网站的观点。4.4网页布局该例在Fireworks的联机帮助Fireworks入门中的教程：“创建页面模型”中有详细说明中国人民大学王蓉例：用Fireworks帮助创建网页模型背景描述设计草样由客户要求其Web站点具有的任意数目的页面元素组成。例如，客户可能会提出：“页面顶端要有徽标，要有能链接到其它页面的导航功能，有用于联机存储的部分和可以插入视频剪辑的位置。”根据这些讨论，设计人员开始对站点布局进行规划，并制作满足客户要求的示例页面草图。在会议期间，您的团队在餐巾纸上草拟了多种可能的设计4.4网页布局中国人民大学王蓉例：用Fireworks帮助创建网页模型纸上的草图设计4.4网页布局客户特别喜欢以上餐巾纸草图中体现的两个设计中国人民大学王蓉例：用Fireworks帮助创建网页模型任务4.4网页布局创建右图设计的页面模型以便向这些客户进行展示。页面模型看起来就如同真实的网页，但它没有真实网页的功能。中国人民大学王蓉例：用Fireworks帮助创建网页模型最后结果4.4网页布局横幅图形幻灯片放映占位符图像导航侧栏区域中国人民大学王蓉例：用Fireworks帮助创建网页模型工作文件夹准备4.4网页布局1.在硬盘上的某个位置创建一个新文件夹，如local_sites2.在硬盘的Fireworks应用程序文件夹中找到cafe_townsend文件夹。如果将Fireworks安装到默认位置，则这两个文件夹的路径如下所示：3.C:\ProgramFiles\Macromedia\Fireworks8\Tutorial_assets\4.将cafe_townsend文件夹复制到新建的local_sites文件夹中中国人民大学王蓉例：用Fireworks帮助创建网页模型创建和保存新文档4.4网页布局1.在Fireworks中，选择“文件”“新建”。2.在“新建文档”对话框中，输入宽度值700，高度值600。确保这两个值的测量单位均为像素。3.将“画布颜色”设为“自定义”，然后从自定义颜色菜单中选择黑色。“新建文档”对话框的外观应如图所示。中国人民大学王蓉例：用Fireworks帮助创建网页模型导入和放置图像4.4网页布局导入图像并将它们放置到Fireworks画布上，以查看这些图像是否适合最终的网页。导入横幅图形导入幻灯片放映占位符图像中国人民大学王蓉例：用Fireworks帮助创建网页模型导入和放置图像——导入横幅图形4.4网页布局1.选择“文件”“导入”，找到文件夹local_sites/cafe_townsend/fireworks_assets/2.选择banner-mockup.jpg，然后单击“打开”。此时会显示插入指针，指示要将图形左上角放置到的位置。3.将指针与画布的左上角对齐，然后单击，以插入横幅图形。4.使用键盘上的箭头键将该横幅图形与画布的顶端准确对齐。如果在“属性”检查器中该横幅的X轴和Y轴坐标值均为0，则表明已正确对齐了该图形。关于页面横幅的制作可参看Fireworks帮助教程：创建页面横幅中国人民大学王蓉例：用Fireworks帮助创建网页模型导入和放置图像——导入幻灯片放映占位符图像4.4网页布局1.选择“文件”“导入”，导入local_sites/cafe_townsend/fireworks_assets/下的slid