网站与网页的设计参考用材料.ppt

《网站与网页的设计参考用材料.ppt》由会员分享，可在线阅读，更多相关《网站与网页的设计参考用材料.ppt（64页珍藏版）》请在三一办公上搜索。

1、第4章 网站与网页的设计,大纲,4.1 网站欣赏4.2 设计原则4.3 确定内容4.4 网页布局,4.1 网站欣赏,通过实例对网站的布局、色彩、LOGO、导航栏、文字等内容有个感性认识网上资源:中国企业港网站建设中心案例展示海硅科技(成功案例)网站设计欣赏,实例学校,中国大学清华 http:/北大 http:/人大 http:/复旦大学文史研究院 http:/http:/中山大学 http:/外国大学Yale http:/www.yale.edu/Harvard http:/www.harvard.edu/Oxford http:/www.ox.ac.uk/Cambridge http:/ww

2、w.cam.ac.uk/MIT http:/www.mit.edu,4.1 网站欣赏,实例学校,4.1 网站欣赏,http:/,与人大、北大比较,实例学校,http:/www.mit.edu/,4.1 网站欣赏,实例公司,国内公司联想 http:/海尔 http:/http:/淘宝 http:/国外公司IBM Nestle http:/http:/Adidas http:/Amazon http:/,4.1 网站欣赏,实例公司,http:/,4.1 网站欣赏,2007年的访问页面,实例公司,http:/,4.1 网站欣赏,实例公司,http:/www.wal-,4.1 网站欣赏,实例人文,ht

3、tp:/,4.1 网站欣赏,参见美术馆,实例人文,http:/www.nmh.gov.tw,4.1 网站欣赏,实例个人主页,中国个人网站排名榜 http:/,4.1 网站欣赏,4.2 总体设计原则,统一所有的元素都应该为一个共同的主题服务，具有整体效果在所有的原则中是最为重要的。连贯利用各组成部分在内容上的内在联系和表现形式上的相互呼应，并注意整个页面设计风格的一致性整齐对比强调突出某些内容的最有效的办法之一协调整个页面符合美的法则，各个部分都非常匀称,4.2 总体设计原则,参考网站建设的基本原则 恒安网络给网站开发和设计者的10点建议,4.3 确定内容,Web站点的定位 Web站点可分为商业

4、型、娱乐型、文化型、教育型、综合型、行业型、区域型等各种类型的站点又可细分为不同层次的专题，如政治、军事、科技、医疗等根据自身Web站点的类型和服务对象进行设计定位，才能有的放矢，在设计方面尽力做到合理。明确主题划分栏目将主题按一定的方法分类，并将它们作为网站的主栏目,4.4 网页布局,页面尺寸基本组件基本原则常见布局结构布局方法布局技术,网页布局是对页面的版面设计,页面尺寸,由于网页最终显示在显示器上，网页大小要符合显示器的大小及分辨率,4.4 网页布局,除去浏览器占去的空间,当浏览网页时不要出现水平方向的滚动条,基本元素,页头又称为页眉，其作用是定义页面的主题常放置站点名字、图片、公司标志

5、（LOGO）以及旗帜广告等页脚与页头相呼应。放置制作者、友情链接、公司联系方式和版权信息等文字,4.4 网页布局,基本元素,4.4 网页布局,基本元素,4.4 网页布局,Logo及公司名称,横幅广告,导航栏,基本元素,LOGO设计标志和门牌唯一一个必须以图片形式出现的页面元素一般放在网页的左上角国际标准8831：最普遍的LOGO规格12060：用于一般大小的LOGO12090：用于大型LOGO,4.4 网页布局,基本元素,导航设计网站设计不可缺少的要素帮助读者理解他们在哪里和去哪里,4.4 网页布局,基本原则,反差重复排列分类,4.4 网页布局,请参考：美观整洁的网页设计4原则,基本原则,反差

6、重复排列分类,4.4 网页布局,这个网页利用一张大图片来吸引用户的注意。而同时网页很自然的单色又让很少的蓝色应用有了更好的效果。,http:/,基本原则,反差重复排列分类,4.4 网页布局,http:/,当你眼睛看到这个页面的时候，你会首先注意到什么？,基本原则,反差重复排列分类,4.4 网页布局,http:/,大大的黄色头部和小小的淡灰文字,基本原则,反差重复排列分类,4.4 网页布局,http:/,在头部和脚部都使用了很有创意的插画。,基本原则,反差重复排列分类,4.4 网页布局,http:/,它的版面排列很连贯也很引人注目,基本原则,反差重复排列分类,4.4 网页布局,A List Ap

7、art 中使用的可视格栏非常有特色。里面的栏目设计良好，把所有包含内容都变得易于阅读。研究表明过宽的栏目会造成严重的阅读困难。,基本原则,反差重复排列分类,4.4 网页布局,这个网站漂亮地将内容规整地组织到三个主要分类下，这些内容的定义既清晰又规整。,常见布局结构,分栏式区域划分无规律式,“国”字型“厂”字型框架型左右型上下型混合型封面型Flash型布局,4.4 网页布局,另一种划分方法,常见布局结构,分栏式最常见的网页框架把页页从上到下分割为几列构架的设计,4.4 网页布局,全球著名视觉杂志I.D.设计十分简洁，使用直线划分页面,常见布局结构,分栏式,4.4 网页布局,常见布局结构,区域划分

8、用辅助线、图形和色彩把网页平面分为几个区域这些区域可以规则的，也可以是不规则的,4.4网页布局,常见布局结构,区域划分比分栏结构更加灵活可以适应多种信息内容编排的需求,4.4 网页布局,在线游戏网站playdo,常见布局结构,无规律式主要以整张图片的网页设计为主类似大海报但占用图片多，下载速度慢,4.4 网页布局,H,常见布局结构,无规律式,4.4 网页布局,R,H,布局方法,通常，创建 Web 站点并不是以打开 Dreamweaver 并立即对页面进行布局开始的。创建 Web 站点的初始工作从纸张或图形编辑应用程序（如 Macromedia Fireworks）开始。图形设计人员通常会画出

9、Web 站点综合图形的草图（也称为“草样”），以便向客户展示并确保站点的初始构思能让客户满意。,4.4 网页布局,布局方法,纸质布局在纸上画出页面的布局草图帮助将许多不确定的思想确定下来软件布局用图像编辑软件，如Photoshop、Fireworks等帮助设计者将自己的设想实现到图纸上,4.4 网页布局,例：用Fireworks帮助创建网页模型背景描述,Caf Townsend 是一家虚构的餐厅，它雇用您的团队设计并建立他们的网站。在项目的早期规划阶段，您的团队成员与 Cafe Townsend 代表共同探讨了有关此网站的观点。,4.4 网页布局,该例在Fireworks 的联机帮助Firew

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

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

12、ks8Tutorial_assets 将 cafe_townsend 文件夹复制到新建的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，则表明已正确对齐了该图形。,关于页面横幅的制作可参

14、看Fireworks帮助教程：创建页面横幅,例：用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/fireworks_assets/下的 vid

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

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

21、成链接。选择“工具”面板中的“文本”工具，然后选择第一段的前三个字。在“属性”检查器中，执行下列操作：单击“粗体”按钮。设置“颜色”为6B1101对第二段的前三个字重复这些步骤。,例：用Fireworks帮助创建网页模型添加页面副本的占位符文本（3/3）,4.4 网页布局,现在，将在每段结尾处添加一行文本，并使其看起来像 Web 链接。在第一段的结尾处单击 I 型指针，然后按空格键。键入 Learn more，选择该文本，设置属性：单击“下划线”按钮“颜色”32596E 在第二段的结尾处单击 I 型指针，然后按空格键。键入 Make a reservation，选择该文本，设置属性：单击“下划

22、线”按钮“颜色”32596E,例：用Fireworks帮助创建网页模型导出网页的图像,4.4 网页布局,创建的 Cafe Townsend 主页的模型如图所示下一步，将 PNG 文件导出为 JPEG 文件，以便在内部网站上显示或通过电子邮件发送给您的同事或客户。,例：用Fireworks帮助创建网页模型导出网页的图像,4.4 网页布局,选择“文件”“图像预览”。在“格式”弹出菜单中，选择“JPEG”。在“品质”文本框中，键入 90。由于此图像不会在公共网页上使用，因此不需要考虑文件大小和下载时间。否则，品质设置为 90 可能太高。在预览图像上方的区域中，您可以查看您的设置如何影响文件大小和下载时间。单击“导出”。,据Websense调查公司称多达70%的上网者表示不愿意在页面读取上超过8秒钟,Dreamweaver中的布局技术,表格层框架层叠样式表,4.4 网页布局,