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

网页设计与制作授课教案学年第学期学院（部）专业（学部）课程名称电子商务网页设计与制作任课教师课内形式理论教学□课内实践□理实一体习题复习□考核评价□其他活动□学习量安排课内：课外形式调查分析小组研讨□实践任务理论探究□考核评价□汇报展示□其他活动课外：序号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等脚本语言判断用户显示器分辨率的大小，再跳转到相应的网页上。例如，将同一个网页按照不同的×720px时，显示1280.html文件；当用户的显示器分辨率为1920px×1080px时，显示1920.html文件。不过，这么做，工作量很大。其实还有其他办法让网页适应用户显示器的分辨率，即需要结合脚本语言来实现。【网页栏目划分】确定网页大小之后，就可以开始设计网页的布局。网页布局是用来设计在网页上放什么内容，以及这些内容放在网页的什么位置。网页设计没有什么定论可言，只要设计得漂亮，想怎么设计都行。一个设计良好的网站首页（即网站的第一个页面）会包含以下几个区域。1．页头页头也称为网页的页眉，主要作用是定义页面的标题。通过网页的标题，用户可以一目了然地知道该网页，甚至该网站的主题是什么。通常页头会放置网站的Logo（网站标志）、Banner等图片。2．BannerBanner是横幅广告的意思，很多网站首页的上方会放置一个Banner。不过，Banner的位置不一定在页头上，也有可能出现在网页的其他区域。Banner中不一定放置的都是广告，也常放置网站的标题或介绍。此外，还有一些网站干脆就没有放置Banner。3．导航区域不是每个网站都会有Banner，但几乎所有网站都会有导航区域。导航用于链接网站的各个栏目，通过导航区域也可以看出网站的定位是什么。导航区域通常是以导航栏的形式出现的，导航栏可以大致分为横向导航栏、纵向导航栏和菜单导航栏三大类。横向导航栏将栏目横向平铺。纵向导航栏将栏目纵向平铺。菜单导航栏通常用于栏目比较多的情况下，尤其是栏目下又有子栏目的情况。4．内容网站按照链接的深度，可以分为以下多级。一级页面通常是网站的首页，该页面中的内容比较多，如各栏目的介绍、最新动态、最近更新、重要信息等。二级页面通常是在首页里单击栏目链接之后的页面，该页面中的内容是某一个栏目下的所有内容（往往只显示标题）。例如，单击新浪网首页导航栏中的“体育”栏目之后看到的就是二级页面，在该页面中看到的是所有与体育相关的新闻标题。三级页面通常是在二级页面中单击标题后出现的页面，该页面通常显示一些具体内容，如某个新闻的具体内容。注意：并不是所有的网站都仅有这3个级别的页面内容。5．页脚页脚通常位于网页的最下方，用于放置公司信息或制作的信息、版权信息等。有时页脚也会放置一些常用的网站导航信息。图13.1所示为一个网页效果。导航区域网站LogoBanner网站内容导航区域网站LogoBanner网站内容图13.1一个网页效果【表格布局】在CSS出现之前，网页都使用表格来布局。在使用表格布局时，利用表格的无边框和间距的特性（将表格的边框与单元格间距都设置为0）将网页元素按版面需要划分之后，再插入表格的各个单元格中即可。【示例13-1】根据图13.2所示的栏目划分方式，将网页不同的部分组成一个完整的网页。【CSS布局】使用表格布局，会大量用到表格的嵌套，并且会在表格中加入大量的如width、border、cellspacing、cellpadding等标签属性。它们所构成的代码大大降低了网页源代码的可读性，例如，如果想弄明白哪些表格用来显示数据、哪些表格用来控制网页样式，要耗费很多时间和精力，维护起来也不方便。使用CSS布局可以将网页内容以及网页样式进行分离，从根本上改变网页内容和网页标签属性混合在一起的局面。使用CSS布局时最常用的为div元素，每一个div元素对应的是一个栏目内容。也可以将div元素看成一个个“块”，每一个块的作用是显示内容，而至于将块放在哪个位置，就由CSS样式来控制。例如，图13.2可以按图13.5所示的方式来划分。图13.5CSS布局划分方式2.网页结构设计CSS布局技巧使用CSS布局虽然比使用表格布局要简洁、方便，但是div与表格还是有很大区别的。使用表格布局，只要将表格划分好之后，就可以在单元格中填入内容。使用CSS布局时，很多开发者不知道如何控制div元素，总是无法将其摆放到想要放的位置上。下面总结了网站上常用的一些网页布局方式，并介绍如何在CSS中处理这种布局。【一栏布局】一栏布局是最简单的布局方式，这种布局方式将网页中的所有内容都显示为一栏。一栏布局中的宽度都是一样的，这时只需要使用一个简单的div元素就可以显示整体的网页布局，代码如下。<divid="mydiv">网页内容</div>设置div元素之后，就可以为该层设置样式，如层的大小、背景颜色、边框等，代码如下。#mydiv{width:600px;height:300px;background-color:#AEAEAE;border-style:solid;border-width:1px;border-color:blue;}在一栏布局中，经常要考虑以下两个方面的问题。（1）宽度。宽度是指div元素的宽度。开发者要考虑多大的宽度才能完全显示网页的内容。除此之外，还有前面说过的分辨率问题。通常，宽度可以设置成比较合适的值，如1080px，这个宽度能适应当前的大多数显示器。或者将宽度设置为一个百分数，如width:80%，这个宽度可以让div元素的大小随着浏览器窗口大小的改变而改变，也可以在不同分辨率的显示器上显示所有网页内容。但这种方法也不是绝对完美的，当div层的宽度改变时，有可能让原本不换行的文字产生换行而引起版面混乱。（2）水平对齐方式。设置一个层时，默认该层是居左显示。当浏览器窗口大于层的宽度时，在层的右侧会显示一些空白，这种不对称的视觉效果并不是很好，因此通常都会让层居中显示。但是在CSS中，只有设置对象内容居中显示的属性，并没有设置对象居中显示的属性，这种情况下又应该怎么处理呢？请看示例13-3。【二栏布局】二栏布局是将网页分为左侧与右侧两列，这也是使用较多的布局方式。二栏布局其实也很简单，首先是创建两个div元素，再设置两个div元素的宽度，然后设置两栏并列显示。【多栏布局】多栏布局是指将网页的内容分为左、中、右三大部分。这种布局方式也是网络中常用的布局方式。通常三栏布局是固定左栏与右栏的大小，而中间栏的大小是可变的，即可以随着浏览器大小的改变而改变。三栏布局与一栏布局和二栏布局有很大的不同。其通常用width属性将左栏与右栏的宽度固定，并且这两栏使用绝对定位模式被固定到浏览器的左侧和右侧，中间栏还是以默认样式出现，但要为中间栏指定边距。边距至少要大于左右栏的宽度。3.CSS盒子模型本节的内容非常重要，因为盒子模型是CSS定位、布局的核心内容。在前面章节的学习中，读者了解了各种网页布局的方式，仅仅通过div元素和列表元素即可完成网页大部分的布局工作。在学习、理解盒子模型的概念后，读者可以更加熟练地进行CSS定位、布局操作。【盒子模型的概念】HTML中大部分的元素（特别是块状元素）都可以被看作一个盒子，而网页元素的定位实际就是这些大大小小的盒子在页面中的定位。这些盒子在页面中是“流动”的，当某个块状元素被用CSS设置了浮动属性，这个盒子就会“流”到上一行。网页布局即关注这些盒子在页面中如何摆放、如何嵌套，而这么多盒子摆在一起，最需要关注的是盒子尺寸的计算、盒子是否流动等方面。为什么要把HTML元素作为盒子模型来研究呢？这是因为HTML元素的特性和盒子非常相似，如图13.9所示。大多数HTML元素的结构都类似图13.9中所示，即除了包含的内容（文本或图像）外，还有内边距、边框和外边距。读者在布局网页、定位HTML元素时只有充分考虑到这些要素，才能更自如地摆弄这些盒子。外边距属性即CSS的margin属性，该属性可拆分为margin-top（顶部外边距）、margin-bottom（底部外边距）、margin-left（左边外边距）和margin-right（右边外边距）。CSS的边框（border）属性和内边距（padding）属性同样可拆分为4边。在Web标准中，CSS的width属性即为盒子包含内容的宽度，而整个盒子的实际宽度为盒子宽度=（padding-left）+（border-left）+（margin-left）+width+（padding-right）+（border-right）+（margin-right）相应地，CSS的height属性即为盒子包含内容的高度，而整个盒子的实际高度为盒子高度=（margin-top）+（border-top）+（padding-top）+height+（padding-bottom）+（border-bottom）+（margin-bottom）【设置外边距】在CSS中，margin属性可以统一设置，也可以上、下、左、右分开设置。【设置边框样式】边框作为盒子模型的组成部分之一，其样式非常重要。设置边框的CSS样式不但影响盒子的尺寸，还影响盒子的外观。边框（border）属性的值有3种：边框尺寸（px）、边框类型和边框颜色（十六进制）。【设置内边距】内边距（padding）类似HTML中表格单元格的填充属性，即盒子边框和内容之间的距离。内边距和外边距（margin）很相似，都是不可见的盒子组成部分，只不过内边距和外边距之间夹着边框。4.教学评价【组织阶段考核与学生自评互评、展示考核结果】本次课的考核注重过程评价：课上考核包括专