资源简介

(共22张PPT)
网页美工设计
1.2
网页一般由页首、主体内容和页尾三部分组成，如图1-3所示，下面分别介绍。
网页的组成
网站Logo网站导航栏主体内容页尾页首网站Banner图1-3网页的版面构成1.2.1网页页首网页页首包含了网站Logo和导航栏等网页元素，一般出现在网站的所有页面中，在整个网站中占重要地位。网站Logo是一个网站的标志，代表了网站的形象，在网站的宣传和推广上起着重要的作用。网站Logo通常放在网站页面的左上角，也可根据需要放置在其他位置。图1-4所示是摆放在不同位置的网站Logo。1．网页美工的岗位职责图1-4 网站Logo网站导航栏用于链接网站的不同页面，引导用户浏览网站的不同信息，如图1-5所示。对于内容不多的网站，可使用简洁、清晰的导航栏；综合类网站由于栏目多，信息量大，通常会将导航栏分成多行，便于访问者了解网站的内容并浏览。2．网站导航栏图1-5 不同类型的导航栏1.2.2网页主体内容从版面看，网页主体内容一般被分类放置在页面的不同版块中，以帮助用户快速获取所需信息，同时对网站内容起到很好的导航作用；从组成元素看，网页内容包括文字、图像和动画等元素，这些元素是网站信息输出的主要载体。图像不仅能直观地表达信息内容，还能装饰网页，增加网页的吸引力，提升访问者的浏览体验。网页中的图像包括网页广告、产品图像、装饰图像、按钮和图标等。其中，网站Banner是网页中尺寸最大的横幅广告，通常置于网页主体内容的顶端，并以多张图像轮播的形式出现，主要体现企业形象或主推事物，如图1-6所示。1．图像图1-6 网站Banner此外，网页中的图像分为静态图像和动态图像两种类型。其中，静态图像主要使用JPEG和PNG格式；动态图像则为GIF格式。设计网页图像时应在确保图像质量的前提下，尽量压缩其体积，以免影响网页打开速度。文字是网页中的主要内容，在网页设计中可以通过对文字的字体、字号、颜色、行距、对齐方式，以及文本版块的底纹及版块边框等进行设计，使其既能发挥信息传达作用，又可装饰页面，如图1-7所示。2．文字图1-7 网页中的文字和图像1.2.3网页页尾网页页尾通常包括网站的版权信息、备案信息和联系方式等内容，也可以是一些文字、按钮或图片形式的导航链接，如图1-8所示。图1-8 网页页尾
课堂互动
网页由哪些元素组成？
各组成元素分别有什么作用？
1.3
网页的版面布局、色彩和内容等是根据网站的定位确定的，设计优秀的网页既能体现网站的功能和风格，又方便用户浏览。下面分别对综合类、科技类、文化教育类、娱乐类和购物类5种常见网站页面进行赏析，帮助网页美工设计初学者开阔视野，并对网页设计有一个感性的认识。
网页设计赏析
1.3.1综合类网站页面赏析综合类网站页面的设计风格相对统一，由于内容丰富，信息量大，为了让访问者快速找到所需信息，一般将导航栏设计在页面顶部并分成多行。此外，为了尽可能多地展示信息内容，又不使页面显得拥挤，页面通常以纵向多栏的超长布局为主，内容以图文结合的形式进行排列，如图1-9所示。图1-9 腾讯网首页1.3.2科技类网站页面赏析科技类网站页面多采用冷色调，页面简洁，图片精致，给人以睿智、精确、稳重、大方的感觉。这类网页的布局多采用横向分栏或居中版式；用大尺寸Banner进行宣传，突出产品或企业理念；用横向方式排列产品图片和说明，如图1-10所示。图1-10苹果和戴尔公司网站页面1.3.3教育类网站页面赏析教育类网站的主要功能是展示教育信息和引导学生学习知识，一般采用图文结合的方式进行排版，页面整体简洁、大方，具有很强的文化气息。图1-11所示为英国牛津布鲁克斯大学的官方网站，其首页采用黑、白、灰和红色搭配，严肃中带有活泼，传统中带有现代感。此外，各版块疏密有致，排列整齐，体现了学校的严谨和活力；而面积最大的Banner版块则体现了学校的学习氛围。图1-11 国外大学网站页面图1-12为北京大学的官方网站，其页面以深红色作为主色，对图标、装饰线等小元素已做深红色处理，使页面整体和谐统一，并体现北大厚重的文化底蕴。图1-12 北京大学网站页面1.3.4娱乐类网站页面赏析娱乐类网站的页面注重视觉冲击力，颜色丰富，内容多以图片和视频为主。为突出视觉效果，在设计时常运用一些表现力强的颜色（橙色、红色、黑色等）作为网页主色或辅助色，通过颜色刺激加深浏览者对网站的视觉印象。图1-13 爱奇艺网站页面图1-13所示为国内综合型视频点播网站爱奇艺的首页，其采用黑色作为主色，以绿色作为点缀，给人以有很强的视觉冲击力和清新感；图1-14为国外某电影网站的首页，其版面新颖别致、创意十足，并通过对颜色和图片的大胆运用，使网页充满现代感和神秘感，可吸引访问者驻足浏览。图1-14 国外某电影网站首页1.3.5购物类网站页面赏析购物类网站由于商品种类繁多，信息量巨大，因此其首页多以框架式排列图文，将不同种类的版块合理分割，让访问者能够轻松找到所需信息，如图1-15所示。图1-15 购物类网站首页该类网站的子页通常是商品详情页，其内容主要由商品图片和商品描述信息组成。设计时可将商品图片适当放大，让访问者看清商品细节，增加购买信心，并合理设置商品描述信息的颜色、字号和排列方式，方便访问者阅读，如图1-16所示。图1-16 购物类商品详情页课后练习（1）简述网页美工设计的工作流程。（2）标出图1-17中所示网页的组成元素。图1-17 标出网页的组成元素（3）图1-18所示的两个网页哪个设计更好？简述原因。图1-18 分析哪个网页设计更好课后练习
THANK YOU!

展开更多......

收起↑