《UI视觉设计案例教程》教案 第4章 网页界面设计.pdfVIP

课题网页界面设计

课时6课时（270min）

知识目标：

（1）了解网页界面的组成

（2）了解常见的网页界面布局及版块规划技巧

（3）了解网页界面设计的要点

（4）了解网页界面设计的尺寸规范

教学目标

（5）了解网页界面设计中常用的字体和字号

（6）掌握网页界面的一般制作方法

素质目标：

（1）认真学习设计规范，将理论知识应用到实际操作中。

（2）开阔眼界，提高分析界面、布局规划的能力。

教学重点：网页界面的组成，页界面设计的要点，网页界面设计的尺寸规范，网页界面设计中常用的字体和

教学重难点字号，网页界面的一般制作方法

教学难点：常见的网页界面布局及版块规划技巧

教学方法问答法、讨论法、讲授法、多媒体展示法

教学用具电脑、投影仪、多媒体课件、教材、APP

教学过程主要教学内容及步骤

【教师】使用APP进行签到

考勤

【学生】按照老师要求签到

【教师】提出问题

问题导入你经常浏览哪些网页？哪个网页界面给你留下的印象最深？

【学生】聆听、思考、主动回答问题

【教师】总结学生的回答、引入新的知识点，讲解网页界面的组成、布局，网页布局的技巧，网页界面设计

的要点，以及网页界面设计的规范等知识

4.1网页界面设计的基础知识

网站是企业、单位或个人通过互联网对外宣传的重要窗口，精美的网页界面对于提升品牌或个人形象至关

重要。

网页界面设计主要是根据网站要向浏览者传递的信息（包括产品、服务、理念、文化等），对网站的功能

进行规划，对界面的效果进行设计和美化。

传授新知

在设计网页前，UI设计师首先要了解网页界面的组成、常见的网页界面布局及版块规划技巧等基础知识，

为网页界面设计打下理论基础。

4.1.1网页界面的组成

网页界面一般由页首、主体内容和页脚三部分组成。

【教师】通过多媒体展示“网页界面组成”图片（详见教材），并讲解新知

1．页首

页首位于整个网页的顶部，一般由Logo和导航栏等组成，是网页的重要功能区域，在整个网站中占重

1

地位。

【教师】通过多媒体展示“网站Logo”图片（详见教材），并讲解新知

Logo是网站的标志，代表了网站的形象，在网站的宣传和推广中起着非常重要的作用。Logo通常放在网

站页面的左上角，也可根据需要放在其他位置。

【教师】通过多媒体展示“不同类型的导航栏”图片（详见教材），并讲解新知

网站导航栏是导航项的集中展示区域，浏览者可以通过单击导航栏中的导航项快速切换页面内容，浏览网

站中对应的信息。

……（详见教材）

2．主体内容

从组成元素看，网页主体内容主要由图像和文字组成，这些元素是网站信息输出的主要载体。

【教师】通过多媒体展示“网页中的图像”图片（详见教材），并讲解新知

网页中的图像主要有网页广告、产品图像、装饰图像、按钮和图标等，它们不仅能直观地表达信息内容，

还能装饰网页，增加网页的吸引力，提升浏览者的浏览体验等。

【教师】通过多媒体展示“网页中的文字”图片（详见教材），并讲解新知