4网站与网页设计教案分析.pptVIP

第4章 网站与网页的设计 大纲 4.1 网站欣赏 4.2 设计原则 4.3 确定内容 4.4 网页布局 4.1 网站欣赏 通过实例对网站的布局、色彩、LOGO、导航栏、文字等内容有个感性认识 网上资源: 海硅科技 (成功案例) 网站设计欣赏 实例——学校 中国大学 清华 北大 人大 中央戏剧学院 / 外国大学 Yale / Harvard / Oxford http://www.ox.ac.uk/ Cambridge http://www.cam.ac.uk/ MIT DUKE Fuqua School of Business / (flash) 实例——学校 实例——学校 实例——学校 实例——公司 国内公司 联想 海尔 / 当当 淘宝 国外公司 IBM Nestle / Clinique Adidas Amazon / 实例——公司 实例——公司 实例——公司 实例——公司 实例——人文 实例——人文 实例——个人主页 中国个人网站排名榜 /2007/idea495.html 4.2 总体设计原则 统一 所有的元素都应该为一个共同的主题服务，具有整体效果在所有的原则中是最为重要的。 连贯 利用各组成部分在内容上的内在联系和表现形式上的相互呼应，并注意整个页面设计风格的一致性整齐 对比 强调突出某些内容的最有效的办法之一 协调 整个页面符合美的法则，各个部分都非常匀称 4.3 确定内容 Web站点的定位 Web站点可分为商业型、娱乐型、文化型、教育型、综合型、行业型、区域型等 各种类型的站点又可细分为不同层次的专题，如政治、军事、科技、医疗等 根据自身Web站点的类型和服务对象进行设计定位，才能有的放矢，在设计方面尽力做到合理。 明确主题 划分栏目 将主题按一定的方法分类，并将它们作为网站的主栏目 4.4 网页布局 页面尺寸 基本组件 基本原则 常见布局结构 布局方法 布局技术 页面尺寸 由于网页最终显示在显示器上，网页大小要符合显示器的大小及分辨率 基本元素 页头 又称为页眉，其作用是定义页面的主题 常放置站点名字、图片、公司标志（LOGO）以及旗帜广告等 页脚 与页头相呼应。放置制作者、友情链接、公司联系方式和版权信息等 文字 基本元素 基本元素 基本元素 LOGO设计 标志和门牌 唯一一个必须以图片形式出现的页面元素 一般放在网页的左上角 国际标准 88×31：最普遍的LOGO规格 120×60：用于一般大小的LOGO 120×90：用于大型LOGO 基本元素 导航设计 网站设计不可缺少的要素 帮助读者理解他们在哪里和去哪里 基本原则 反差 重复 排列 分类 基本原则 反差 重复 排列 分类 基本原则 反差 重复 排列 分类 基本原则 反差 重复 排列 分类 基本原则 反差 重复 排列 分类 基本原则 反差 重复 排列 分类 基本原则 反差 重复 排列 分类 基本原则 反差 重复 排列 分类 常见布局结构 分栏式 区域划分 无规律式 “国”字型 “厂”字型 框架型 左右型 上下型 混合型 封面型 Flash型布局 常见布局结构 分栏式 最常见的网页框架 把页页从上到下分割为几列构架的设计 常见布局结构 分栏式 常见布局结构 区域划分 用辅助线、图形和色彩把网页平面分为几个区域 这些区域可以规则的，也可以是不规则的 常见布局结构 区域划分 比分栏结构更加灵活 可以适应多种信息内容编排的需求 常见布局结构 无规律式 主要以整张图片的网页设计为主 类似大海报 但占用图片多，下载速度慢 常见布局结构 无规律式 布局方法 通常，创建 Web 站点并不是以打开 Dreamweaver 并立即对页面进行布局开始的。 创建 Web 站点的初始工作从纸张或图形编辑应用程序（如 Macromedia Fireworks）开始。图形设计人员通常会画出 Web 站点综合图形的草图（也称为“草样”），以便向客户展示并确保站点的初始构思能让客户满意。 布局方法 纸质布局 在纸上画出页面的布局草图 帮助将许多不确定的思想确定下来 软件布局 用图像编辑软件，如Photoshop、Fireworks等帮助设计者将自己的设想实现到图纸上 例：用Fireworks帮助创建网页模型背景描述 Café Townsend 是一家虚构的餐厅，它雇用您的团队设计并建立他们的网站。在项目的早期规划阶段，您的团队成员与 Cafe Townsend 代表共同探讨了有关此网站的观点。 例：用Fireworks帮助创建网页模型背景描述 设计草样由客户要求其 Web 站点具有的任意数目的页面元素组成。例如，客户可能会提出：“页面顶端要有徽标，要有能链接到其