《网站与网页的设计参考用材料》由会员分享，可在线阅读，更多相关《网站与网页的设计参考用材料（64页珍藏版）》请在金锄头文库上搜索。
1、第4章 网站与网页的设计中国人民大学 王蓉大纲n4.1 网站欣赏n4.2 设计原则n4.3 确定内容n4.4 网页布局中国人民大学 王蓉4.1 网站欣赏n通过实例对网站的布局、色彩、 LOGO、导航栏、文字等内容有 个感性认识n网上资源:q中国企业港网站建设中心案例展示q海硅科技 (成功案例)q网站设计欣赏中国人民大学 王蓉实例学校n中国大学q清华 http:/q北大 http:/ q人大 http:/q复旦大学文史研究院 http:/ http:/q中山大学 http:/n外国大学qYale http:/www.yale.edu/qHarvard http:/www.harvard.edu/
2、qOxford http:/www.ox.ac.uk/qCambridge http:/www.cam.ac.uk/qMIT http:/www.mit.edu4.1 网站欣赏中国人民大学 王蓉实例学校4.1 网站欣赏http:/与人大、北大比较中国人民大学 王蓉实例学校http:/www.mit.edu/4.1 网站欣赏中国人民大学 王蓉实例公司n国内公司q联想 http:/q海尔 http:/ http:/q淘宝 http:/n国外公司qIBM qNestle http:/ http:/qAdidas http:/qAmazon http:/ 网站欣赏中国人民大学 王蓉实例公司http:/
3、4.1 网站欣赏2007年的访问页面中国人民大学 王蓉实例公司http:/ 网站欣赏中国人民大学 王蓉实例公司http:/www.wal-4.1 网站欣赏中国人民大学 王蓉实例人文http:/4.1 网站欣赏参见美术馆中国人民大学 王蓉实例人文http:/www.nmh.gov.tw4.1 网站欣赏中国人民大学 王蓉实例个人主页n中国个人网站排名榜 http:/ -132745.html4.1 网站欣赏中国人民大学 王蓉4.2 总体设计原则n统一q所有的元素都应该为一个共同的主题服务，具有整体效 果在所有的原则中是最为重要的。n连贯q利用各组成部分在内容上的内在联系和表现形式上的相 互呼应，并
4、注意整个页面设计风格的一致性整齐n对比q强调突出某些内容的最有效的办法之一n协调q整个页面符合美的法则，各个部分都非常匀称中国人民大学 王蓉4.2 总体设计原则n参考q网站建设的基本原则 恒安网络q给网站开发和设计者的10点建议中国人民大学 王蓉4.3 确定内容nWeb站点的定位 qWeb站点可分为商业型、娱乐型、文化型、教育型、综 合型、行业型、区域型等q各种类型的站点又可细分为不同层次的专题，如政治、 军事、科技、医疗等q根据自身Web站点的类型和服务对象进行设计定位，才 能有的放矢，在设计方面尽力做到合理。n明确主题n划分栏目q将主题按一定的方法分类，并将它们作为网站的主栏目中国人民大学
5、 王蓉4.4 网页布局n页面尺寸n基本组件n基本原则n常见布局结构n布局方法n布局技术网页布局是对页面 的版面设计中国人民大学 王蓉页面尺寸n由于网页最终显示在显示器上，网页大小 要符合显示器的大小及分辨率4.4 网页布局分辨率页页面尺寸 800600780428 778428 10247681007600 1003599除去浏览器 占去的空间当浏览网页时 不要出现水平 方向的滚动条中国人民大学 王蓉基本元素n页头q又称为页眉，其作用是定义页面的主题q常放置站点名字、图片、公司标志（LOGO） 以及旗帜广告等n页脚q与页头相呼应。放置制作者、友情链接、公司 联系方式和版权信息等n文字4.4 网
6、页布局中国人民大学 王蓉基本元素4.4 网页布局中国人民大学 王蓉基本元素4.4 网页布局Logo及公司名称横幅广告导航栏中国人民大学 王蓉基本元素nLOGO设计q标志和门牌q唯一一个必须以图片形式出现的页面元素q一般放在网页的左上角q国际标准n8831：最普遍的LOGO规格n12060：用于一般大小的LOGOn12090：用于大型LOGO4.4 网页布局中国人民大学 王蓉基本元素n导航设计q网站设计不可缺少的要素q帮助读者理解他们在哪里和去哪里4.4 网页布局中国人民大学 王蓉基本原则n反差n重复n排列n分类 4.4 网页布局请参考：美观整洁的网页设计4原 则中国人民大学 王蓉基本原则n反差
7、n重复n排列n分类 4.4 网页布局这个网页利用一张大图片来吸 引用户的注意。而同时网页很 自然的单色又让很少的蓝色应 用有了更好的效果。 http:/ 王蓉基本原则n反差n重复n排列n分类 4.4 网页布局http:/ 时候，你会首先注意到什 么？ 中国人民大学 王蓉基本原则n反差n重复n排列n分类 4.4 网页布局http:/ 淡灰文字 中国人民大学 王蓉基本原则n反差n重复n排列n分类 4.4 网页布局http:/ 用了很有创意的插 画。 中国人民大学 王蓉基本原则n反差n重复n排列n分类 4.4 网页布局http:/ 贯也很引人注目 中国人民大学 王蓉基本原则n反差n重复n排列n分类
8、4.4 网页布局A List Apart 中使用的可视格栏非常有特色。 里面的栏目设计良好，把所有包含内容都变 得易于阅读。研究表明过宽的栏目会造成严 重的阅读困难。 中国人民大学 王蓉基本原则n反差n重复n排列n分类 4.4 网页布局这个网站漂亮地将内容规整地组织到三个 主要分类下，这些内容的定义既清晰又规 整。 中国人民大学 王蓉常见布局结构n分栏式n区域划分n无规律式n“国”字型n“厂”字型n框架型q左右型q上下型q混合型n封面型nFlash型布局4.4 网页布局另一种 划分方 法中国人民大学 王蓉常见布局结构n分栏式q最常见的 网页框架q把页页从 上到下分 割为几列 构架的设 计4.4
9、 网页布局全球著名视觉杂志I.D.设计十分简洁，使用直线划分页面中国人民大学 王蓉常见布局结构n分栏式4.4 网页布局中国人民大学 王蓉常见布局结构n区域划分q用辅助线、图 形和色彩把网 页平面分为几 个区域q这些区域可以 规则的，也可 以是不规则的4.4网页布局中国人民大学 王蓉常见布局结构n区域划分q比分栏结构更 加灵活q可以适应多种 信息内容编排 的需求4.4 网页布局在线游戏网站playdo中国人民大学 王蓉常见布局结构n无规律式q主要以整张 图片的网页 设计为主q类似大海报q但占用图片 多，下载速 度慢4.4 网页布局H中国人民大学 王蓉常见布局结构n无规律式4.4 网页布局RH中国
10、人民大学 王蓉布局方法n通常，创建 Web 站点并不是以打开 Dreamweaver 并立即对页面进行布局开始 的。 n创建 Web 站点的初始工作从纸张或图形编 辑应用程序（如 Macromedia Fireworks） 开始。图形设计人员通常会画出 Web 站点 综合图形的草图（也称为“草样”），以便向 客户展示并确保站点的初始构思能让客户 满意。 4.4 网页布局中国人民大学 王蓉布局方法n纸质布局q在纸上画出页面的布局草图q帮助将许多不确定的思想确定下来n软件布局q用图像编辑软件，如Photoshop、 Fireworks等帮助设计者将自己的设 想实现到图纸上4.4 网页布局中国人民大
11、学 王蓉例：用Fireworks帮助创建网页模型 背景描述nCaf Townsend 是一家虚构的餐厅，它雇 用您的团队设计并建立他们的网站。在项 目的早期规划阶段，您的团队成员与 Cafe Townsend 代表共同探讨了有关此网站的 观点。4.4 网页布局该例在Fireworks 的联机帮助Fireworks 入门中的教程： “创建页面模型”中有 详细说明中国人民大学 王蓉例：用Fireworks帮助创建网页模型 背景描述n设计草样由客户要求其 Web 站点具有的任 意数目的页面元素组成。例如，客户可能 会提出：“页面顶端要有徽标，要有能链接 到其它页面的导航功能，有用于联机存储 的部分和
12、可以插入视频剪辑的位置。”根据 这些讨论，设计人员开始对站点布局进行 规划，并制作满足客户要求的示例页面草 图。n在会议期间，您的团队在餐巾纸上草拟了 多种可能的设计4.4 网页布局中国人民大学 王蓉例：用Fireworks帮助创建网页模型 纸上的草图设计4.4 网页布局客户特别喜欢以上餐巾纸草图中体现的两个设计中国人民大学 王蓉例：用Fireworks帮助创建网页模型 任务4.4 网页布局n创建右图设计的 页面模型n以便向这些客户 进行展示。 n页面模型看起来 就如同真实的网 页，但它没有真 实网页的功能。 中国人民大学 王蓉例：用Fireworks帮助创建网页模型 最后结果4.4 网页布局
13、横幅图形幻灯片放映占 位符图像 导航侧栏区域中国人民大学 王蓉例：用Fireworks帮助创建网页模型 工作文件夹准备4.4 网页布局n在硬盘上的某个位置创建一个新文件夹， 如local_sitesn在硬盘的 Fireworks 应用程序文件夹中找 到 cafe_townsend 文件夹。如果将 Fireworks 安装到默认位置，则这两个文件 夹的路径如下所示： nC:Program FilesMacromedia Fireworks 8Tutorial_assets n将 cafe_townsend 文件夹复制到新建的 local_sites文件夹中 中国人民大学 王蓉例：用Firewor
14、ks帮助创建网页模型 创建和保存新文档4.4 网页布局1. 在 Fireworks 中，选择“文件”“新建”。 2. 在“新建文档”对话框中，输入宽度值 700 ，高度值 600。确保这两个值的测量单位 均为像素。 3. 将“画布颜色”设为“ 自定义”，然后从自 定义颜色菜单中选择 黑色。 “新建文档”对 话框的外观应如图所 示。中国人民大学 王蓉例：用Fireworks帮助创建网页模型 导入和放置图像4.4 网页布局n导入图像并将它们放置到 Fireworks 画布 上，以查看这些图像是否适合最终的网页 。n导入横幅图形n导入幻灯片放映占位符图像 中国人民大学 王蓉例：用Fireworks帮助创建网页模型 导入和放置图像导入横幅图形
