HTML CSS DIV网页设计与布局（第3版）（微课版）-教案 第13章 网页布局与设计技巧.doc

PAGE8

网页设计与制作

授课教案

学年第学期

学院（部）专业（学部）

课程名称

电子商务网页设计与制作

任课教师

课内形式

理论教学□课内实践□理实一体?习题复习□考核评价□其他活动□

学习量

安排

课内：

课外形式

调查分析?小组研讨□实践任务?理论探究□考核评价□汇报展示□其他活动?

课外：

序号

13

授课日期

月日

月日

月日

月日

授课班级

课内教学内容：

第13章网页布局与设计技巧

课外学习任务：

（1）课前：

以小组为单位，讨论网页布局与设计技巧相关知识，并以PPT的形式记录下来。

（2）课后：

=1\*GB3①使用表格布局来设计一个网页。

=2\*GB3②使用CSS布局来设计一个网页。

=3\*GB3③使用CSS布局技巧来布局网页。

教学目标：

知识目标

掌握网页布局。

掌握CSS布局技巧。

掌握CSS盒子模型。

能力目标

能够独立实现网页布局；

能够掌握CSS布局技巧和盒子模型。

素质目标

较强的专业知识和自学能力；

丰富知识结构，提升专业知识；

掌握网页布局和盒子模型的相关技术，理解并应用专业知识。

重点难点及解决方法：

（1）重点：CSS布局技巧

解决方法：通过知识点讲解+课堂在线展示相结合的方法，教师讲解CSS的布局技巧，引导学生积极思考，掌握相应知识；同时通过课堂在线展示，使学生可以更直观的了解CSS布局技巧；培养学生的思维能力和分析问题解决问题的能力。

（2）难点：CSS盒子模型

解决方法：通过代码讲解+在线演示的的方式教学，细致讲解网页中CSS盒子模型的概念。帮助学生掌握CSS盒子模型实现方法和技巧。从实用的角度帮助学生提高专业知识。

课内教学授课地点：

教学媒体：微课、PPT课件、网页图片、相关教学视频等。

设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。

其它资源：与本次课相关的专业技术论文电子版。

学习效果评价方式：

对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；

对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；

对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。

课后小结：

填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“√”。

课内教学内容及过程

时间分配

方法

及手段

1.网页布局

【网页大小】

设计网页的第一步，需要考虑网页的大小。网页过大，浏览器会出现滚动条，浏览不便；网页过小，显示内容过少，影响美观。

1．影响网页大小的因素

直接影响网页大小的因素是浏览者显示器的分辨率。市面上主流的显示器或显示屏分辨率包括以下几种。

1280px×720px（HD）：也称为720p，是高清晰度的标准分辨率，适合手机和平板电脑等小型显示屏。

1080p（1920px×1080px）：适用于大多数日常办公和娱乐需求，24英寸及24英寸以下的屏幕常采用此分辨率。

2K（2560px×1440px）：适合需要更高清晰度的用户使用，如设计师和摄影师，27英寸及27英寸以上屏幕常采用此分辨率。

4K（3840px×2160px）：适合专业设计和视频制作领域使用，40英寸及40英寸以上屏幕常采用此分辨率。

8K（7680px×4320px）：目前市场上最高端的显示器分辨率，主要应用于科研、医疗等专业领域。

使用浏览器打开一个网页时，除了显示网页内容之外，还会显示浏览器的框架，因此，网页不能完全按照显示器的分辨率来设计。网页内容一般会居中显示，两侧进行留白处理，这样在不同分辨率的屏幕中显示的效果都会按比例缩放，不会因为分辨率改变而导致网页内容出现溢出的现象。

2．如何设计网页大小

网页究竟要设计多大的尺寸呢？近年来，计算机硬件的更新换代十分迅速，几乎所有市面上的显示器均支持超过1440px×900px的分辨率，因此建议在设计网页时可以以1920px×1080px分辨率为基础来设计。在1920px×1080px分辨率的显示器中，网页中心显示内容建议的宽度在1200px以内，最佳宽度范围为1000~1200px。这样的尺寸可以保证大部分用户舒适地浏览网页，同时适应不同屏幕尺寸的需求。

3．其他设计网页大小的方法

如果开发者精益求精，也可以设计多个网页，这样可以实现在浏览者打开网页时，先使用JavaScript等脚本语言判断用户显示器分辨率的大小，再跳转到相应的网页上。例如，将同一个网页按照不同的分辨率设计成两个不同的页面：一个是1280.html；另一个是1920.html。当用户的显示器分辨率为1280px×720px时，显示1