《项目11网页界面设计.doc》由会员分享，可在线阅读，更多相关《项目11网页界面设计.doc（14页珍藏版）》请在三一办公上搜索。
1、教学内容网页界面设计教学目标知识目标1.了解网页界面设计的概念2.掌握网页界面的组成元素3.了解网页界面的组成元素、分类4.掌握网页版面布局的常用形式技能目标1.掌握CorelDRAW软件中矩形工具的使用方法2.掌握CorelDRAW软件中辅助线的使用方法4.掌握Photoshop软件中图层样式的使用方法5.掌握Photoshop软件中选框工具的使用方法6.掌握Photoshop软件中文字工具的使用方法教学重点l 掌握网页界面布局的常用形式教学难点l 根据文案，分析案例的组成元素及布局l 设计符合要求的网页界面课前准备教案、电脑、项目册教学时数2课时教学方法讲授法、讨论法、任务驱动法、演示法教
2、学过程一、情景导入如今，网络成为人们文化生活中不可或缺的一部分。网页作为一种新的视觉表现形式，它兼容了传统平面设计的特征，又具备其所没有的优势，是将技术性与艺术性融为一体的创造性活动。正因为如此，网站的建设与设计也就变得不可或缺，网站设计起到了一个导视的作用，人们通过门户网站就能够更好地查找自己想要的信息。激烈的竞争使得越来越多的网站更加注重界面的设计，希望以此作为竞争的突破点，提高用户对网站的认同。二、理论知识1. 网页界面设计概述网页界面是用户与网站进行交互的媒介，是用户最直观的体验。网页界面设计是集计算机心理学、设计艺术学、认知科学和人机工程学于一体的交叉研究领域，是国际计算机界和设计界
3、最活跃的研究方向。2. 网页界面的组成元素网页是由一些基本元素构成，包括文本、图像、超级链接、表格、动画、音乐和交互式表单等。2.1 网页中的文字网页中的文本一直是最重要的信息载体与交流工具，网页中的信息也以文本为主，与图像相比，文字虽然不如图像那样易于吸引浏览者的注意，但却能准确地表达信息的内容和含义。此外，用户还可以在网页中设计各种各样的文字列表，来明确表达一系列的项目，如图11-1所示。图11-1网页中的文字2.2 图像和动画图像是网页中最主要的元素之一，图像不但能美化页面，而且与文本相比能够更直观地表达设计者的意图，为了更有效地吸引浏览者的注意，通常将网页中的广告做成动画形式，如图11
4、-2所示。图11-2网页中的图像帮动画 2.3 声音和视频声音是多媒体网页的一个重要组成部分，可以将某些声音添加到网页中，如图11-3所示。2.4 表单网页中的表单通常用于接收用户在浏览器端的输入，然后将这些信息发送到用户设置的目标端，这个目标可以是文本文件、网页、电子邮件，也可以是服务器端的应用程序，如图11-4所示。图11-3网页中的声音和视频 图11-4网页中的表单2.5 超级链接超级链接是从一个网页指向另一个目的端的链接，如图11-5所示。2.6 表格在网页中，表格用来控制信息的布局方式，其作用有两个方面：一是使用行和列的形式来布局文本以及其他的列表化数据；二是可以使用表格来精确控制各
5、种网页元素在网页中出现的位置，如图11-6所示。图11-5网页中的超级链接 图11-6网页中的表格 2.7 其他元素3. 网站的分类网页是构成网站的基本元素，通俗地说，网站就是由多个网页组成的，网站按其内容的不同可分为个人网站、企业类网站、机构类网站、娱乐休闲类网站等3.1 个人网站个人网站的设计比较自由，不同的行业，不同的兴趣和爱好的网页制作者，不同的设计目的，所设计出来的网页会有很大的不同，但在搭配各谐、个性方面特别注意，如图11-7所示。图11-7个人网站3.2 企业类网站随着信息时代的到来，企业类网站作为企业的名片越来越受到人们的重视，成为企业宣传品牌、展示服务的平台，制作企业网站时，
6、要结构清晰，所浏览的内容要很容易让浏览者找到，如图11-8和图11-9所示。图11-8宝洁公司网站图11-9长虹公司网站3.3 机构类网站机构类网站通常是指政府机关、非营利性机构或相关社团组织建立的网站，如学术组织网站、教育网站、机关网站等。这类网站的风格通常与其组织所代表的意义一致，一般采用较常见的布局与配色，如图11-10和图11-11所示。图11-10教育网站图11-11政府网站3.4 娱乐游戏类网站娱乐休闲类网站大多是以提供娱乐信息和流行音乐为主的网站，如很多在线游戏网站和音乐网站等，它们可以提供丰富多彩的娱乐内容，如图11-12和图11-13所示。图11-12娱乐类网站图11-13
7、音乐类网站3.5 电子商务类网站电子商务网站有多种类型，最为常见的是在互联网上成立虚拟商场，为人们提供一种新的购物方式，如图11-14所示。图11-14 电子商务网站3.6 综合门户类网站门户类网站是一种综合性网站，如搜狐、网易、新浪等，将无数信息整合、分类，多数网民通过门户类网站来寻找自己感兴趣的信息资源，如图11-15所示。图11-15 综合类门户网站4. 网页界面设计的原则4.1 用户导向原则明确用户类型设计网页首先要明确到底谁是使用者，要站在用户的观点和立场上来考虑设计网站。4.2 KISS原则KISS原则就是Keep It Sample And Stupid的缩写，简洁和易于操作是网
8、页设计的最重要的原则。4.3 Miller原则Miller原则即是关于网页排版布局方面，一般网页上面的栏目分在59个之间，可以进行分组处理。4.4 视觉平衡原则网页设计时，也要使各种元素（如图形、文字、空白）都会有视觉作用。为了达到视觉平衡，在设计网页时需要以更多的文字来平衡一幅图片。视觉平衡也要遵循中国人的阅读习惯从左到右，从上到下，如果文字是采用左对齐，需要在网页的右面加一些图片或一些较明亮、较醒目的颜色。4.5 色彩的搭配和可阅读性原则颜色是影响网页的重要因素，不同的颜色对人的感觉有不同的影响，例如：红色和橙色使人兴奋并使得心跳加速。 4.6 和谐一致原则通过对网站的各种元素（颜色、字体
9、、图形、空白等）使用一定的规格，使得设计良好的网页看起来应该是和谐的。破坏这一原则，会误导浏览者，并且让整个网站显的杂乱无章，给人留下不良的印象。5. 网页界面设计基本方法5.1 点的作用5.2 线与面的作用5.3 留白的运用5.4 点、线、面关系的处理6. 网页版面布局常用形式1“T”字形结构“T”字形结构是指页面顶部为网站标志和广告条，左面为导航菜单，右面为主要内容的布局，这种版面的优点是页面结构清晰及主次分明,如图11-25和图11-26所示。图11-25 T型结构示意图 图11-26 T型结构网站2“国”字形结构其页面的最上部分一般放置网站的标志和导航栏或Banner广告，页面中间主要
10、放置网站的主要内容，最下部分一般放置网站的版权信息和联系方式等，如图11-27和图11-28所示。图11-27 国字结构示意图 图11-28 国字结构网站3标题正文结构标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等，多见一些政府网站，如图11-29和图11-30所示。图11-29 标题正文结构示意图 图11-30 标题正文结构网站4左右框架布局型左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则放置网站的主要内容，如图11-31和图11-32所示。图11-31 左右框架结构示意图 图11-32
11、 左右框架结构网站5上下框架型上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架，如图11-33和图11-34所示。图11-33 上下框架型示意图 图11-34 上下框架型网站6综合框架型综合框架型布局是结合左右框架型布局和上下框架型布局的页面布局技术，如图11-35和图11-36所示。图11-35 综合型框架示意图 图11-36 综合型框架网站7POP布局POP布局通常是一种以精美的海报画面为主体的网页布局方式，颇具艺术感和时尚感，如图11-37所示。图11-37 POP型布局网站11.1.7网页中的文字在设计网页时，文字是网页中数量最多、使用最广泛的一种页面元素
12、，我们必须要高度重视网页中字体的设计，灵活设计字体的类型、样式、大小和颜色，才能使整个网页中的字体富于变化，给人们以美的享受。文字作为网站的重要元素，必须进行标准化设计，标准的字体主要用于导航菜单、广告语和文字的排版，汉字字体有许多种，如果访问者的计算机里没有安装那种字体，会导致文字无法正确显示，所以必须将文字转变为图像的形式，这些图像一般用于导航菜单和广告语等，如图11-38。图11-38 网页中的文字图11-39 背景上的美术字1字体的使用选择好合适的字体，再根据版面大小设计合适的字号和颜色，有时还会根据背景图对文字进行美术方面的修改,如图11-39所示。2网页设计中的文字应用除设置好文字
13、的字体、字号、行距还要注意文字的整体编排以及文字和图形化，标题与正文要区分，在排版文字时注意文字编排形式以及首行文字的强调、引文的强调，特殊文字的强调，在文字用语方面要求简洁，格式统一，信息内容编排分类，如图11-40所示。图11-40文字综合应用8. 网页的首页设计8.1 确定首页的功能模块首页的内容模块是指需要在首页上承现的主要内容和功能。一般的站点都需要这样一些模块：网站名称(logo)、 广告条、主菜单、新闻、 搜索(search), 友情链接、邮件列表、计数器、版权等。选择哪些模块，实现哪些功能，是否需要添加其他模块都是首页设计首先需要确定的，如图11-41所示。图11-41 网站的
14、首页8.2 设计首页的版面在功能模块确定后，开始设计首页的版面。设计版面的最好方法是：找一张白纸，一支笔，先将理想中的草图勾勒出来，然后再用相应网页制作软件实现。作好风格定位，再进行版面编排，在进行版面编排时要做到：主次分明中心突出；大小搭配相互呼应；图文并茂内容丰富，多使用线条和形状划分版块，明确色系。9. 网页中的配色方案9.1 红色红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的颜色。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色，如图11-42所示。图11-42 红色系网站图11-43 黄色系网站9.2 黄色黄色的性格冷漠、高傲、敏感、具有
15、扩张和不安宁的视觉印象。黄色是各种色彩中，最为娇气的一种色。只要在纯黄色中混入少量的其它色，其色相感和色性格均会发生较大程度的变化，如图11-43所示。9.3 蓝色蓝色的色感冷嘲热讽，性格朴实而内向，常为那些性格活跃、具有较强扩张力的色彩提供一个深远、广博、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力，如图11-44所示。图11-44 蓝色系网站图11-45 绿色系网站9.4 绿色绿色是具有黄色和蓝色两种成份的色。在绿色中，将黄色的扩张感和蓝色的收缩感相中和，将黄色的温暖感与蓝色的寒冷感相抵消，这样使得绿
16、色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的颜色，如图11-45所示。9.5 紫色紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉，如图11-46所示。9.6 白色白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄，如图11-47所示。图11-46 紫色系网站图11-47 白色系网站10. 网页中的常用尺寸10.1 网页设计标准尺寸（1）分辨率在800600像素下，网页宽度保持在778像素以内，就不会出现水平滚动条，高度则视版面和内容决定。（2）分辨率在1024768像素下，网页宽度保
17、持在1002像素以内，如果满框显示的话,高度是612-615像素之间，就不会出现水平滚动条和垂直滚动条。（3）在Photoshop里面做网页可以在分辨率在800600像素状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740560像素左右 。10.2 标准网页广告尺寸规格（1）用于产品或新闻照片展示:120120像素（2）做LOGO使用：12060像素（3）产品演示或大型LOGO：12090像素（4）表现照片效果的图像广告：125125像素（5）用于框架或左右形式主页的广告链接：23460像素（6）有较多图片展示的广告条：39272像素（7）用于页眉或页脚：46860像素（8）主要用于网页链接或网站小型LOGO：8831像素三、 实例分析1阅读、分析文案2设计理念分析3核心技能分析四、 实例演示效果图展示五、 实例点评 六、 课堂小结网页界面设计应遵循的要点：明确企业理念、整体风格和色彩搭配。将网站的总体策划以草图方式展现出来，确定网站类型和框架结构以及布局形式，再收集与主题相关的素材，包括图像与文字，再设计网站的内容结构、目录结构和链接结构，在Photoshop和CorelDRAW 软件中利用各种工具再结合美术知识，体现出来。 七、 作业布置1未来科技有限公司网页制作2爱侣宠物医院网站主页八、 课后反思
