04 网站与网页的设计.ppt

1、第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 h

2、ttp:/,4.1 网站欣赏,实例学校,4.1 网站欣赏,与人大、北大比较,实例学校,/,4.1 网站欣赏,实例公司,国内公司 联想 海尔 当当 淘宝 国外公司 IBM Nestle Clinique Adidas Amazon ,4.1 网站欣赏,实例公司,4.1 网站欣赏,2007年的访问页面,实例公司,4.1 网站欣赏,实例公司,http:/www.wal-,4.1 网站欣赏,实例人文,4.1 网站欣赏,参见美术馆,实例人文,.tw,4.1 网站欣赏,实例个人主页,中国个人网站排名榜 ,4.1 网站

3、欣赏,4.2 总体设计原则,统一 所有的元素都应该为一个共同的主题服务，具有整体效果在所有的原则中是最为重要的。 连贯 利用各组成部分在内容上的内在联系和表现形式上的相互呼应，并注意整个页面设计风格的一致性整齐 对比 强调突出某些内容的最有效的办法之一 协调 整个页面符合美的法则，各个部分都非常匀称,4.2 总体设计原则,参考 网站建设的基本原则 恒安网络 给网站开发和设计者的10点建议,4.3 确定内容,Web站点的定位 Web站点可分为商业型、娱乐型、文化型、教育型、综合型、行业型、区域型等 各种类型的站点又可细分为不同层次的专题，如政治、军事、科技、医疗等 根据自身Web站点的类型和服务

4、对象进行设计定位，才能有的放矢，在设计方面尽力做到合理。 明确主题 划分栏目 将主题按一定的方法分类，并将它们作为网站的主栏目,4.4 网页布局,页面尺寸 基本组件 基本原则 常见布局结构 布局方法 布局技术,网页布局是对页面的版面设计,页面尺寸,由于网页最终显示在显示器上，网页大小要符合显示器的大小及分辨率,4.4 网页布局,除去浏览器占去的空间,当浏览网页时不要出现水平方向的滚动条,基本元素,页头 又称为页眉，其作用是定义页面的主题 常放置站点名字、图片、公司标志（LOGO）以及旗帜广告等 页脚 与页头相呼应。放置制作者、友情链接、公司联系方式和版权信息等 文字,4.4 网页布局,基本元素

5、,4.4 网页布局,基本元素,4.4 网页布局,Logo及公司名称,横幅广告,导航栏,基本元素,LOGO设计 标志和门牌 唯一一个必须以图片形式出现的页面元素 一般放在网页的左上角 国际标准 8831：最普遍的LOGO规格 12060：用于一般大小的LOGO 12090：用于大型LOGO,4.4 网页布局,基本元素,导航设计 网站设计不可缺少的要素 帮助读者理解他们在哪里和去哪里,4.4 网页布局,基本原则,反差 重复 排列 分类,4.4 网页布局,请参考：美观整洁的网页设计4原则,基本原则,反差 重复 排列 分类,4.4 网页布局,这个网页利用一张大图片来吸引用户的注意。而同时网页很自然的单

6、色又让很少的蓝色应用有了更好的效果。,基本原则,反差 重复 排列 分类,4.4 网页布局,当你眼睛看到这个页面的时候，你会首先注意到什么？,基本原则,反差 重复 排列 分类,4.4 网页布局,大大的黄色头部和小小的淡灰文字,基本原则,反差 重复 排列 分类,4.4 网页布局,在头部和脚部都使用了很有创意的插画。,基本原则,反差 重复 排列 分类,4.4 网页布局,它的版面排列很连贯也很引人注目,基本原则,反差 重复 排列 分类,4.4 网页布局,A List Apart 中使用的可视格栏非常有特色。里面的栏目设计良好，把所有包含内容都变得易于阅读。研究表明过宽的栏目会造成严重的阅读困难。,基本

7、原则,反差 重复 排列 分类,4.4 网页布局,这个网站漂亮地将内容规整地组织到三个主要分类下，这些内容的定义既清晰又规整。,常见布局结构,分栏式 区域划分 无规律式,“国”字型 “厂”字型 框架型 左右型 上下型 混合型 封面型 Flash型布局,4.4 网页布局,另一种划分方法,常见布局结构,分栏式 最常见的网页框架 把页页从上到下分割为几列构架的设计,4.4 网页布局,全球著名视觉杂志I.D. 设计十分简洁，使用直线划分页面,常见布局结构,分栏式,4.4 网页布局,常见布局结构,区域划分 用辅助线、图形和色彩把网页平面分为几个区域 这些区域可以规则的，也可以是不规则的,4.4网页布局,常

8、见布局结构,区域划分 比分栏结构更加灵活 可以适应多种信息内容编排的需求,4.4 网页布局,在线游戏网站playdo,常见布局结构,无规律式 主要以整张图片的网页设计为主 类似大海报 但占用图片多，下载速度慢,4.4 网页布局,H,常见布局结构,无规律式,4.4 网页布局,R,H,布局方法,通常，创建 Web 站点并不是以打开 Dreamweaver 并立即对页面进行布局开始的。 创建 Web 站点的初始工作从纸张或图形编辑应用程序（如 Macromedia Fireworks）开始。图形设计人员通常会画出 Web 站点综合图形的草图（也称为“草样”），以便向客户展示并确保站点的初始构思能让客

9、户满意。,4.4 网页布局,布局方法,纸质布局 在纸上画出页面的布局草图 帮助将许多不确定的思想确定下来 软件布局 用图像编辑软件，如Photoshop、Fireworks等帮助设计者将自己的设想实现到图纸上,4.4 网页布局,例：用Fireworks帮助创建网页模型背景描述,Caf Townsend 是一家虚构的餐厅，它雇用您的团队设计并建立他们的网站。在项目的早期规划阶段，您的团队成员与 Cafe Townsend 代表共同探讨了有关此网站的观点。,4.4 网页布局,该例在Fireworks 的联机帮助Fireworks入门中的教程： “创建页面模型”中有详细说明,例：用Fireworks

10、帮助创建网页模型背景描述,设计草样由客户要求其 Web 站点具有的任意数目的页面元素组成。例如，客户可能会提出：“页面顶端要有徽标，要有能链接到其它页面的导航功能，有用于联机存储的部分和可以插入视频剪辑的位置。”根据这些讨论，设计人员开始对站点布局进行规划，并制作满足客户要求的示例页面草图。 在会议期间，您的团队在餐巾纸上草拟了多种可能的设计,4.4 网页布局,例：用Fireworks帮助创建网页模型纸上的草图设计,4.4 网页布局,客户特别喜欢以上餐巾纸草图中体现的两个设计,例：用Fireworks帮助创建网页模型任务,4.4 网页布局,创建右图设计的页面模型 以便向这些客户进行展示。 页面

11、模型看起来就如同真实的网页，但它没有真实网页的功能。,例：用Fireworks帮助创建网页模型最后结果,4.4 网页布局,横幅图形,幻灯片放映占位符图像,导航侧栏区域,例：用Fireworks帮助创建网页模型工作文件夹准备,4.4 网页布局,在硬盘上的某个位置创建一个新文件夹，如local_sites 在硬盘的 Fireworks 应用程序文件夹中找到 cafe_townsend 文件夹。如果将 Fireworks 安装到默认位置，则这两个文件夹的路径如下所示： C:Program FilesMacromedia Fireworks8Tutorial_assets 将 cafe_townsen

12、d 文件夹复制到新建的local_sites文件夹中,例：用Fireworks帮助创建网页模型创建和保存新文档,4.4 网页布局,1. 在 Fireworks 中，选择“文件”“新建”。 2. 在“新建文档”对话框中，输入宽度值 700，高度值 600。确保这两个值的测量单位均为像素。,3. 将“画布颜色”设为“自定义”，然后从自定义颜色菜单中选择黑色。 “新建文档”对话框的外观应如图所示。,例：用Fireworks帮助创建网页模型导入和放置图像,4.4 网页布局,导入图像并将它们放置到 Fireworks 画布上，以查看这些图像是否适合最终的网页。 导入横幅图形 导入幻灯片放映占位符图像,例

13、：用Fireworks帮助创建网页模型导入和放置图像导入横幅图形,4.4 网页布局,1. 选择“文件”“导入” ，找到文件夹local_sites/cafe_townsend/fireworks_assets/ 2. 选择 banner-mockup.jpg，然后单击“打开”。 此时会显示插入指针，指示要将图形左上角放置到的位置。 3. 将指针与画布的左上角对齐，然后单击，以插入横幅图形。 4. 使用键盘上的箭头键将该横幅图形与画布的顶端准确对齐。 如果在“属性”检查器中该横幅的 X 轴和 Y 轴坐标值均为 0，则表明已正确对齐了该图形。,关于页面横幅的制作可参看Fireworks帮助教程：创

14、建页面横幅,例：用Fireworks帮助创建网页模型导入和放置图像导入幻灯片放映占位符图像,4.4 网页布局,选择“文件”“导入” ，导入local_sites/cafe_townsend/fireworks_assets/下的slideshow-placeholder.jpg 将插入指针放置在距先前导入的横幅图形下方约 6 像素的位置，然后单击，以插入幻灯片放映占位符。 该占位符图像的 X 轴和 Y 轴坐标值分别为 0 和 98，则表明已正确对齐了该图像。,占位符图像表示最终网页上显示的元素大小和位置,例：用Fireworks帮助创建网页模型创建内容区域,4.4 网页布局,在“工具”面板的“

15、矢量”部分中选择“圆角矩形”工具。 在文档窗口中，将十字型指针定位在画布上，并向右下方拖动以创建一个形状。 当圆角矩形仍处于选定状态时，在“属性”检查器中， 将“填充颜色”设为6B1101，将“笔触颜色”设为“透明”。,例：用Fireworks帮助创建网页模型创建内容区域,4.4 网页布局,按右图所示，在“属性”检查器中设置圆角矩形高、宽和X、Y轴的位置 选定圆角矩形，选择“窗口”“自动形状属性” ，在 “自动形状属性”面板如右图设置其圆角。,例：用Fireworks帮助创建网页模型创建导航侧栏区域,4.4 网页布局,在“工具”面板的“矢量”部分中选择“矩形”工具。 将十字型指针定位在先前绘制

16、的圆角矩形上，并向右下方拖动，以便为侧栏创建一个垂直矩形。 在“属性”检查器中，设置该矩形的 “填充颜色”A3210A，将“笔触颜色” 设为“透明”，使矩形具有橙色填充色且无笔触。 在“属性”检查器中设置矩形宽度140，高度295， X 轴位置0， Y 轴位置278,例：用Fireworks帮助创建网页模型创建表示网页文本的灰白色矩形,4.4 网页布局,在“工具”面板的“矢量”部分中选择“矩形”工具。 将十字型指针定位在先前创建的圆角矩形上，创建一个水平矩形。 在“属性”检查器中，设置该矩形的 “填充颜色” 为F7EEDF， “笔触颜色”为“透明”，现在，此矩形具有灰白色填充色且无笔触。 在“

17、属性”检查器中设置该矩形的宽度为560，高度为 295， X 轴位置140， Y 轴位置278 注意：Y 轴位置应与侧栏矩形的 Y 轴位置相同。,例：用Fireworks帮助创建网页模型置入链接的占位符文本（1/2）,4.4 网页布局,在“工具”面板的“矢量”部分中选择“文本”工具 在“属性”检查器中，设置下列属性： 从“字体”弹出菜单中选择“TrebuchetMS” 单击“粗体”按钮。 输入 14 作为字号。 消除锯齿级别选择“平滑消除锯齿”。 单击字号菜单旁的“颜色”图标，选择白色样本。 单击“左对齐”按钮。 在垂直双箭头图标旁的字顶距百分比框中，输入 200。,例：用Fireworks帮

18、助创建网页模型置入链接的占位符文本（2/2）,4.4 网页布局,当指针为 I 型时，在侧栏矩形左上角附近单击。 此步骤将创建一个空的文本块。 在此文本块中键入 Cuisine，然后按 Enter 换行。 键入时文本块将随之变宽。 键入下列各项，键入每一项后按 Enter 换行： Chef Ipsum Articles Special Events Location Menu Contact Us 得到如图所示的表示导航链接的文本块。,例：用Fireworks帮助创建网页模型置入视频的占位符图像,4.4 网页布局,选择“文件”“导入”，导入 local_sites/cafe_townsend/f

19、ireworks_assets/下的 video-placeholder.jpg 将插入指针定位在距灰白色复制区域左上角的右下方约 6 像素的位置，插入该图像。,例：用Fireworks帮助创建网页模型置入特色项的占位符图像,4.4 网页布局,选择“文件”“导入”，导入local_sites/cafe_townsend/fireworks_assets/下的 feature-placeholder.jpg 将插入指针定位在距视频占位符图像下方约 6 像素的位置，插入该图像 调整位置， 定位该图像以使其左边缘与视频占位符图像的左边缘对齐,例：用Fireworks帮助创建网页模型添加页面副本的占位

20、符文本（1/3）,4.4 网页布局,选择“工具”面板 中“文本”工具。 在“属性”检查器中，设置下列属性： 从“字体”弹出菜单选择“Verdana”。 输入 11 作为字号。 确保没有选定“粗体”按钮。 “颜色” 240E0A 在垂直双箭头图标旁的字顶距百分比框中，输入 200。 将 I 型指针定位在距视频占位符图像右上角 6 像素的位置，然后向右下角拖动，以绘制文本框。 确保所有侧边上均有约 6 像素的边距。,例：用Fireworks帮助创建网页模型添加页面副本的占位符文本（2/3）,4.4 网页布局,在该文本框中键入或粘贴约两段的占位符文本。 可以粘贴loremipsum.txt 文件中的文本 下面修改文本，以使段落开头的文本高亮显示，而每个段落的结尾文本则模拟成链接。 选择“工具”面板中的“文本”工具，然后选择第一段的前三个字。 在“