网页设计与制作项目教程单元8 网站首页的设计与制作
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
和两列布局对比，本案例的不同之处在于主体内容所在的盒子中 增加了class为content_middle的小盒子。
在两列布局样式的基础上，单独控制class为content_middle的小盒 子的样式即可，给它设置宽度和左浮动属性。
浏览器效果如图8-8所示。
图8-8 “三列布局”页面结构预览效果图
工业和信息化“十三五”高职高专人才培养规划教材
汤智华 主编 王爱红 主审
【教学导航】
教学目标
本单元重点 本单元难点
Biblioteka Baidu
（1）学会设计页面的布局结构 （2）学会创建页面布局样式 （3）学会创建美化页面元素的样式 （4）学会插入DIV标签对网页的页面进行布局 （5）学会创建代码片断，且在网页插入已有的代码片断 （6）学会在使用DIV＋CSS布局的网页中输入文字和插入各种页面元素
（1）设计页面的布局结构 （2）创建页面的布局样式 （3）创建美化页面元素的样式 （4）插入DIV标签对网页的页面进行布局
（1）设计页面的布局结构 （2）插入DIV标签对网页的页面进行布局
教学方法 任务驱动法、分组讨论法
8.1 CSS布局 8.1.1 版心与CSS布局流程
一、版心 “版心”是指网页中主体内容所在的区域。 如图8-1所示，框线内即为北京大学网站首页的版心。 “版心”一般在浏览器窗口中水平居中显示，常见的宽度值为960px、 980px、1000px等。
浏览器效果如图8-6所示。
图8-6 “两列布局”页面结构预览效果图
三、三列布局 三列布局方式是两列布局的演变，只是将主体内容分成了左、中、 右三部分。 如图8-7所示即为一个“三列布局”页面的结构示意图。
图8-7 “三列布局”页面结构示意图
在图8-7中，内容模块被分为了左中右三部分，实现这一效果的关 键是在内容模块所在的大盒子中嵌套3个小盒子，然后对3个小盒子分 别设置浮动。
通栏布局的关键在于在相应模块的外面添加一层div，并且将外层 div的宽度设置为100%。
图8-9 “通栏布局”页面结构示意图
接下来使用相应的HTML标记搭建页面结构，主体代码如下所示：
…… <body> <div id="top">头部</div> <div id="topbar">
<div class="nav">导航栏</div> </div> <div id="banner">焦点图</div> <div id="content">内容</div> <div id="footer">
二、CSS布局流程 为了提高网页制作的效率，布局时通常需要遵守一定的布局流程， 具体如下。 （1）确定页面的版心。 （2）分析页面中的行模块，以及每个行模块中的列模块。
图8-1 北京大学网站首页的版心
（3）运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模 块。
接下来以贵州交通职业技术学院网站首页为例，分析一下页面中 的各个模块，具体结构如图8-2所示。
<div class="content_left">内容左部分</div> <div class="content_right">内容右部分</div> </div> <div id="footer">页面底部</div> </body> ……
由于内容模块被分为了左右两部分，所以，只需在单列布局样式 的基础上，单独控制class为content_left和content_right的两个小盒子的 样式即可，并且分别给这两个盒子设置左浮动和右浮动属性。父div限 制宽度，水平居中；子div固定宽度，浮动定位。
图8-3 “单列布局”页面结构示意图
主体代码如下所示：
…… <body> <div id="top">头部</div> <div id="nav">导航栏</div> <div id="banner">焦点图</div> <div id="content">内容</div> <div id="footer">页面底部</div> </body> ……
在上述代码中，定义了5对<div></div>标记，分别用于控制页面 的头部（top）、导航（nav）、焦点图（banner）、内容（content）和 页面底部（footer）。
接下来设置每个div的宽高。同时对盒子定义“margin:5px auto;” 样式，它表示盒子在浏览器中水平居中，且上下外边距均为5px。这 样既可以使盒子水平居中，又可以使各个盒子在垂直方向上有一定的 间距。
图8-2 贵州交通职业技术学院网站首页截图
8.1.2 用CSS进行网页布局
一、单列布局 “单列布局”是网页布局的基础，所有复杂的布局都是在此基础 上演变而来的。 如图8-3所示，即为一个“单列布局”页面的结构示意图。 通过上图容易看出，这个页面从上到下分别为头部、导航、焦点 图、内容和页面底部，每个模块单独占据一行，且宽度与版心相等， 经测量为980px。
在实际应用中，如北京大学网站的页面就属于单列布局，并具有 以下特点。 （1）顶部通栏即可。 （2）中部固定宽度，高度可随着内容扩展。 （3）底部和中部宽度一样，高度固定。
浏览器效果如图8-4所示。
图8-4 “单列布局”页面结构预览效果图
二、两列布局
两列布局的网页内容被分为了左右两部分，通过这样的分割，打 破了统一布局的呆板，让页面看起来更加活跃。如图8-5所示即为一个 “两列布局”页面的结构示意图。
在图8-5中，内容模块被分为了左右两部分，实现这一效果的关键 是在内容模块所在的大盒子中嵌套两个小盒子，然后对两个小盒子分 别设置浮动。
图8-5 “两列布局”页面结构示意图
主体代码如下所示：
…… <body> <div id="top">头部</div> <div id="nav">导航栏</div> <div id="banner">焦点图</div> <div id="content">
四、通栏布局 为了网站的美观，网页中的一些模块，例如，头部、导航、焦点 图或页面底部等经常需要通栏显示。
将模块设置为通栏后，无论页面放大或缩小，该模块都将横铺于 浏览器窗口中。
如图8-9所示即为一个应用“通栏布局”页面的结构示意图。
在上图中，导航栏和页面底部为通栏模块，它们将始终横铺于浏 览器窗口中。
在两列布局样式的基础上，单独控制class为content_middle的小盒 子的样式即可，给它设置宽度和左浮动属性。
浏览器效果如图8-8所示。
图8-8 “三列布局”页面结构预览效果图
工业和信息化“十三五”高职高专人才培养规划教材
汤智华 主编 王爱红 主审
【教学导航】
教学目标
本单元重点 本单元难点
Biblioteka Baidu
（1）学会设计页面的布局结构 （2）学会创建页面布局样式 （3）学会创建美化页面元素的样式 （4）学会插入DIV标签对网页的页面进行布局 （5）学会创建代码片断，且在网页插入已有的代码片断 （6）学会在使用DIV＋CSS布局的网页中输入文字和插入各种页面元素
（1）设计页面的布局结构 （2）创建页面的布局样式 （3）创建美化页面元素的样式 （4）插入DIV标签对网页的页面进行布局
（1）设计页面的布局结构 （2）插入DIV标签对网页的页面进行布局
教学方法 任务驱动法、分组讨论法
8.1 CSS布局 8.1.1 版心与CSS布局流程
一、版心 “版心”是指网页中主体内容所在的区域。 如图8-1所示，框线内即为北京大学网站首页的版心。 “版心”一般在浏览器窗口中水平居中显示，常见的宽度值为960px、 980px、1000px等。
浏览器效果如图8-6所示。
图8-6 “两列布局”页面结构预览效果图
三、三列布局 三列布局方式是两列布局的演变，只是将主体内容分成了左、中、 右三部分。 如图8-7所示即为一个“三列布局”页面的结构示意图。
图8-7 “三列布局”页面结构示意图
在图8-7中，内容模块被分为了左中右三部分，实现这一效果的关 键是在内容模块所在的大盒子中嵌套3个小盒子，然后对3个小盒子分 别设置浮动。
通栏布局的关键在于在相应模块的外面添加一层div，并且将外层 div的宽度设置为100%。
图8-9 “通栏布局”页面结构示意图
接下来使用相应的HTML标记搭建页面结构，主体代码如下所示：
…… <body> <div id="top">头部</div> <div id="topbar">
<div class="nav">导航栏</div> </div> <div id="banner">焦点图</div> <div id="content">内容</div> <div id="footer">
二、CSS布局流程 为了提高网页制作的效率，布局时通常需要遵守一定的布局流程， 具体如下。 （1）确定页面的版心。 （2）分析页面中的行模块，以及每个行模块中的列模块。
图8-1 北京大学网站首页的版心
（3）运用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模 块。
接下来以贵州交通职业技术学院网站首页为例，分析一下页面中 的各个模块，具体结构如图8-2所示。
<div class="content_left">内容左部分</div> <div class="content_right">内容右部分</div> </div> <div id="footer">页面底部</div> </body> ……
由于内容模块被分为了左右两部分，所以，只需在单列布局样式 的基础上，单独控制class为content_left和content_right的两个小盒子的 样式即可，并且分别给这两个盒子设置左浮动和右浮动属性。父div限 制宽度，水平居中；子div固定宽度，浮动定位。
图8-3 “单列布局”页面结构示意图
主体代码如下所示：
…… <body> <div id="top">头部</div> <div id="nav">导航栏</div> <div id="banner">焦点图</div> <div id="content">内容</div> <div id="footer">页面底部</div> </body> ……
在上述代码中，定义了5对<div></div>标记，分别用于控制页面 的头部（top）、导航（nav）、焦点图（banner）、内容（content）和 页面底部（footer）。
接下来设置每个div的宽高。同时对盒子定义“margin:5px auto;” 样式，它表示盒子在浏览器中水平居中，且上下外边距均为5px。这 样既可以使盒子水平居中，又可以使各个盒子在垂直方向上有一定的 间距。
图8-2 贵州交通职业技术学院网站首页截图
8.1.2 用CSS进行网页布局
一、单列布局 “单列布局”是网页布局的基础，所有复杂的布局都是在此基础 上演变而来的。 如图8-3所示，即为一个“单列布局”页面的结构示意图。 通过上图容易看出，这个页面从上到下分别为头部、导航、焦点 图、内容和页面底部，每个模块单独占据一行，且宽度与版心相等， 经测量为980px。
在实际应用中，如北京大学网站的页面就属于单列布局，并具有 以下特点。 （1）顶部通栏即可。 （2）中部固定宽度，高度可随着内容扩展。 （3）底部和中部宽度一样，高度固定。
浏览器效果如图8-4所示。
图8-4 “单列布局”页面结构预览效果图
二、两列布局
两列布局的网页内容被分为了左右两部分，通过这样的分割，打 破了统一布局的呆板，让页面看起来更加活跃。如图8-5所示即为一个 “两列布局”页面的结构示意图。
在图8-5中，内容模块被分为了左右两部分，实现这一效果的关键 是在内容模块所在的大盒子中嵌套两个小盒子，然后对两个小盒子分 别设置浮动。
图8-5 “两列布局”页面结构示意图
主体代码如下所示：
…… <body> <div id="top">头部</div> <div id="nav">导航栏</div> <div id="banner">焦点图</div> <div id="content">
四、通栏布局 为了网站的美观，网页中的一些模块，例如，头部、导航、焦点 图或页面底部等经常需要通栏显示。
将模块设置为通栏后，无论页面放大或缩小，该模块都将横铺于 浏览器窗口中。
如图8-9所示即为一个应用“通栏布局”页面的结构示意图。
在上图中，导航栏和页面底部为通栏模块，它们将始终横铺于浏 览器窗口中。